Pin parent container and pin children element based on scroll

[GulbinDev]

Hello, I am trying to implement a pinning interaction when scrolling the pinned parent container. Currently, I achieved it using timeline. Hehehe

But I want some suggestions of any better approaches instead of using timeline because I really think it would be very difficult to maintain a very long and much complex animation using timeline. I also probably  want to turn it to pieces of animations to prevent long running tasks on mainthread like there could be multiple cards and animate using timelines then have the same pinning animations on it. See my Codepen  example, i have 2 <p> tags that stays for a few moments when scrolling. Try to scroll a little slow to see what I currently achieved.

Here's my Codepen 

 

 

 

See the Pen ZYpxrBe by gulbin-dev (@gulbin-dev) on CodePen.

[Rodrigo]

Hi @GulbinDev and welcome to the GSAP Forums!

 

Actually I can't think of a better way to orchestrate a complex animation than a Timeline, especially if you make good use of the powerful position parameter, which by looking a bit at the code in your demo, might be exactly what you need. Check the video in the position parameter link.

 

This video as well can show you in a bit more detail how powerful Timelines can be:

 

Also check our docs:

https://gsap.com/docs/v3/GSAP/Timeline

 

If you want to avoid using a single Timeline with a single ScrollTrigger config, what you can do is create a single ScrollTrigger that pins the parent element as long as you need and create individual Tweens with ScrollTrigger instances of their own to control the Tweens in the sequence you want to create but, as I mentioned before my go-to approach here would be to exhaust the Timeline route and resort to individual Tweens only if you don't have other option, regardless of how complex your Timeline can be.

 

Finally correctly controlling a single complex Timeline, can be tricky, but the secret sauce is to be as organized as possible with your code.

 

Hopefully this helps.

Happy Tweening!

[GulbinDev]

@Rodrigo Thank you for the response! I guess my approach is fine after all.