Leaderboard

That's because you're using point objects to draw the paths, but you're animating actual elements. You're not reconciling the two sets of values. In other words, when the first element moves (by animation), you're not updating the corresponding point's x/y values. You could probably just use the element's _gsTransform object directly instead: It's probably best to have a single "source of truth" for the data rather than splitting it apart as point objects and elements. I hope that helps.

You're a godsend. That was exactly what I was missing. Thank you a ton! And yeah, the code needs quite a bit of cleanup.

Hi @smallio Your mask timeline breaks after the first click because its already been played. You can solve that by playing from the beginning of the timeline. maskTL.play(0) Hopefully that helps. Happy tweening.

@GreenSock thanks for the tips! I forgot that loading time affects the performance of animations, therefore I minimized the video from 60MB to 5MB, added some sexy grid to cover this low quality and everything works sweet For production I will also download the video on website preload so everything should work basically in an instant. Cheers! NOTE: Moving any animations to canvas and SVGs seems to have lower impact on the video playback.

Performance optimization is a pretty huge topic, so it's very difficult to know exactly what's causing the problems on your particular page. In general, the biggest problem tends to be the browser's graphics rendering, so make sure you're affecting the smallest number of pixels possible, that the bounding box for those changes is as small as possible, and that you're not animating things that could affect document flow (like top/left, margin, etc.) If you still need some help, feel free to post a link or a reduced test case so we can see what's going on. Happy tweening!

First of all, thanks for joining the club, @Sixtus. As I stated above, I'm not at all familiar with Nuxt, but are you using the files from the "bonus-files-for-npm-users" directory in the download zip? If you're still having trouble, it may help if you create a reduced test case and provide it here so that folks can see what's going on.

Yeah, this is definitely isn't a trivial task, but I took a crack at it for you: A few things to note: I simplified a lot of the code using some boilerplate functions for creating SVGs and setting attributes. I used a liveSnap to implement the bounds manually. It was simpler to just use a Draggable for the overall group, and use the center, line, and outer edge elements as the "trigger". That way, the bounds are applied to the overall group very easily. This whole thing would have been super simple if it wasn't for the custom logic necessary to limit the outer circle based on its radius in relation to the edges. That was the tricky piece - definitely an edge case. I sure hope that helps. Hopefully you'll see enough value to join Club GreenSock

@DjKarimi thanks for advocating for GSAP among your peers. I hope your enthusiasm rubs off on them While I'd admit that the particular code chunk you quoted from anime is indeed nice and concise, there are some tradeoffs performance-wise with implementing things that way (for any engine) which is why we didn't do that with GSAP. But it's entirely possible to get almost exactly the same concise code chunk with GSAP using a single helper function as I demonstrate here: Here's the helper function : function multiTo(target, duration, vars) { var tl = new TimelineMax(vars), copy = {}, reserved = {delay:1, onComplete:1, onCompleteParams:1, onCompleteScope:1, useFrames:1, onUpdate:1, onUpdateParams:1, onUpdateScope:1, onStart:1, onStartParams:1, onStartScope:1, onReverseComplete:1, onReverseCompleteParams:1, onReverseCompleteScope:1, onRepeat:1, onRepeatParams:1, onRepeatScope:1, yoyo:1, repeat:1, repeatDelay:1, data:1, paused:1, reversed:1, callbackScope:1, id:1, yoyoEase:1}, val, i, p, d, v; //create a copy of the vars object that doesn't have any of the values that are reserved for the timeline for (p in vars) { if (!reserved[p]) { copy[p] = vars[p]; } } for (p in copy) { val = copy[p]; if (val.push && val.length) { d = duration / val.length; for (i = 0; i < val.length; i++) { v = {ease:copy.ease}; v[p] = val[i]; tl.to(target, d, v, d * i); } delete copy[p]; } } tl.to(target, duration, copy, 0); return tl; } And here's how the GSAP call would look: var morphing = multiTo('#morphing .polymorph', 2, { attr: [ { points: '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369' }, { points: '70 6 119.574 60.369 100.145 117.631 39.855 117.631 55.426 68.369' }, { points: '70 57 136.574 54.369 89.145 100.631 28.855 132.631 38.426 64.369' }, { points: '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' } ], ease: Power1.easeOut, repeat:-1 }); Basically it just interprets an array of values as if you want them equally spaced inside the timeline. Also note that like most other engines, anime suffers from time leakage in loops, meaning that it uses a simplistic "when the animation is done, start the time over again" which isn't precise for the overall time. It's not a true loop. GSAP implements logic internally to avoid the leaking. Here's a demo comparing the two: Open the console and watch how the gap grows larger and larger in anime between the actual time and the animation's time. There will always be some amount of lag, up to one tick (typically less than 17ms), but anime keeps growing the gap on every iteration. It's noticeable if you watch the animations and see how they start off synchronized and then the drift after a while. GSAP remains true to the actual time, but anime falls behind. Anyway, is this what you were looking for?

I forgot to mention that I'd strongly recommend reading these two articles (if you haven't done so already): https://greensock.com/get-started-js/ https://css-tricks.com/writing-smarter-animation-code/ Happy tweening!

Hi, Only a sporting challenge. But, what's my mistake with the timeline 'go' ? Kind regards Mikel