Jump to content

elegantseagulls last won the day on October 20 2018

elegantseagulls had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by elegantseagulls

  1. Greetings, Greetings, fellow GSAPers.


    Up until this point I've pretty much only worked with SVG/Dom animations, but it seems that Safari is having some performance issues animating a SVG pattern that's also an SVG mask (see: https://codepen.io/elegantseagulls/pen/OBKPba ) so: Hello Canvas. I've never worked with animating canvas so I'm wondering if my approach is they way I should be approaching it:


    See the Pen qQPjwV by elegantseagulls (@elegantseagulls) on CodePen


    I initially had it looping every line and adding a `tl.to()` for that, but changed it to just be the number of custom eases and am adding the additional lines in the update function instead.

    I'm not looking a full code review, and I know this is not a direct question, but just making sure I'm not approaching Canvas in a completely backwards way. Any thoughts are welcome.




  2. My suggestion would be to use a 'snap'. You can get your current X position by using `this.x` in your `onCubeDrag()` function. From there  you should be able to math the difference for what the 90deg snap should be. If I have time this morning I'll see if I can fork your pen and dive into the details a little deeper.

    • Like 7