Create looping animation without need for .set before

[SamStAubyn]

I've expanded on my previous exploding animation to get the icons and svgs to bob in place once the animation has compelted, I found it has a weird behaviour however where it forgets the previous y origin coordinates and then when I fire the repeating loop it animates from 0 instead. My fix for this was to set the x and y before each animation fires but surely there must be a better way than this?

 

I tried creating another function altogether but that had the same issue where the x and y coords we're not being preserved between functions. 

 

NOTE - I've noticed that in the codepen the explosion animation from the centre doesn't seem to fire as expecting and all the svgs come from the centre as expected.

See the Pen WNmPZaJ by SamStAubyn94 (@SamStAubyn94) on CodePen

[mvaneijgen]

Your thought process is not wrong, but I think you have a logic issue here. You have a timeline with ScrollTrigger and are adding that to a master timeline which also includes another timeline, when should that later timeline start animating? I know you want to animate when the ScrollTrigger is done, but that would not work like this. 

 

I've removed your master timeline (btw I would not use TimelineMax that is from an old version of GSAP you can now just directly call gsap.timeline()). I've also removed the function of your ScrollTrigger timeline and have it do it's thing on page load, then I've added an onLeave call back to you ScrollTrigger that fires when you leave the ScrollTrigger eg when it is done animating and then I call your function bobInfinite(). 

 

I've also add a clamp to your ScrollTrigger, now it will only start animating when the visitor has really scrolled. Hope it helps and happy tweening! 

 

See the Pen RwdOgwa?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

 

If you want to know why the calculations where all off, this is because GSAP records all the values on page load an then when it needs to animate it just does that, so in your demo on page load it would see where all the dots are and record there positions, but then when everything was done all the positioned changed and all the calculations it did where off. Right now the onLeave ensures that the moment GSAP does it's calculations the elements are at their final position and thus all the calculations are correct

[SamStAubyn]

Thanks, my content now pins to the top of the screen though instead of staying centered?

 

Also, if I then wanted to add more steps to my timeline such as an exit animation how would I add this?

[mvaneijgen]

That is where your element is naturally with no GSAP, so there it gets placed. 

 

Well you could add more functions to the onLeave call back, but the things bouncing is your exit animation at the moment. I would just further develop your demo and post back here with a new demo if your have an issue or a question. 

 

See the Pen NWJmaEj by mvaneijgen (@mvaneijgen) on CodePen