Leaderboard

Welcome to the forums, @Sandy Choudhary You should never animate the same element that you're pinning. Instead, just create a wrapper element that you pin instead: https://codepen.io/GreenSock/pen/JjqjQMV Is that what you're looking for?

Not reallly, your method was making the calculations, but the value being used by GSAP wasn't being updated. GSAP records the initial value of the properties you want to tween and then iterates between that value and the final one you're passing in the config. In order to optimize this process GSAP doesn't do constant read/write operations, it does that once and then just iterates between the values. Invalidating a GSAP instances removes the initial values (the value the element currently has) but not necessarily the target value. If you want to update the target value that's when function based values come in handy, because that tells GSAP to update both the initial and final values in this particular case. Your method was updating the value of a variable, the approach I use is to call a function that returns a value. You could use other approaches to get the same result but using a function is always the cleanest one IMHO. Hopefully this clear things up. Happy Tweening!

This baseline code should get you started, the rest is down to styling and crafting interactions. https://codepen.io/GreenSock/pen/gOvvJee It's a big job and I'm afraid it's beyond the help we can offer in here to dig into it in detail.

If I understand correctly, there is a demo in the demo section showing something like that. https://codepen.io/GreenSock/pen/YzydvBE

Do you have a demo? Basically, you just add your timelines to a parent timeline and optionally use the position parameter to space them out however you want. gsap.timeline() .add(timeline1) .add(timeline2, "+=0.5") .add(timeline3, "+=0.5") ...