GSAP ScrollTrigger Pinning Question

[Matthew Meaklim]

Hello,

 

I've implemented a variation of the above CodePen on a website, and although it functions well for the most part, there's two things I'd like to change, but am unsure how best to do so.

 

1. I'd like the first panel to be visible from the get go - I don't wish to scroll to the pinned section and then have it animate in.

2. I'd like the last panel to remain visible as I scroll away - I don't wish for the last panel to disappear as I scroll away.

 

Thanks,

 

Matthew

 

See the Pen ZEpKqoz by nour-darani (@nour-darani) on CodePen

[Rodrigo]

Hi,

 

You can solve it with a different style for the first heading, using the Toggle Actions config properly and triggering the first header animation at the same time with the second header.

 

Toggle Actions (from the Docs):

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

Here is a live example (thanks for the simple codepen! 🙌)

See the Pen oNyqppN by GreenSock (@GreenSock) on CodePen

 

Finally your original example was using very old versions of GSAP and ScrollTrigger (3.5.x), always use the latest versions.

 

Happy Tweening!

[Matthew Meaklim]

Many thanks for this @Rodrigo - let's just say I was concocting one heck of an over-engineered fix...

 

Yeah, my live site is using the latest versions of both, that was just a CodePen I had been referencing.