ScrollTrigger - Pinning entire section before scrolling further to the next

[false_hero]

Hi! I'm currently testing GSAP with Lenis but this seems to be mostly a GSAP + ScrollTrigger issue.

 

I'm trying to figure the best way to pin the second section (red background) before you proceed scrolling to the next section (white background).

 

I wanted to add a "pause" before the user proceeds to scroll down past it / the section should be pinned until the gsap timeline finishes.

See the Pen yyLLNEw by shirasaki (@shirasaki) on CodePen.

[mvaneijgen]

Hi @false_hero welcome back!

 

Because you state lenis isn't the issue, I've reduced your pen even more to just focus on the issue at hand. I've restructured your pen a bit how I would set it up. Seen that you want things to happen in sequence, eg first zooming in then zooming out I converted your setup to a timeline, that is what timelines are for, playing things in sequence. I've also updated your CSS, wrapped both sections in an element called .trigger and used that as the ScrollTrigger trigger. This because it is good practice to never animate your trigger elements. 

 

I've borrowed this logic from my stacking card effect post and although the animations in there are different the logic also applies to your setup, so if you want to learn more I highly recommend checking out that post! 

 

 

As you can see there is currently no ScrollTrigger in the demo, this because the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  I've also installed GSDevTools a premium plugin you can use for free on Codepen 🎉

 

On the timeline first the tween plays to zoom in, then we quickly .set() the zoom out section to become visible (I've made it hidden, so that on page load we don't see it) and then start the zoom out animation, then I've created an empty tween that does absolutely nothing for 1 second, eg if you would enable ScrollTrigger you would have the red section linger for a moment, before it scrolls a way. I've also placed some comments in your JS to explain certain properties, be sure to read through them.

 

Now if you want to see how this would work on scroll, just enable the ScrollTrigger code and check it out. 

 

Hope it helps and happy tweening! 

 

See the Pen VYwwjEd?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[false_hero]

Hi @mvaneijgen! First of all, I truly appreciate your time responding to my question - thank you so much!

 

This is actually a nice way of thinking! I spent a lot of time figuring out the best way to do it and what you said is a great perspective I never thought of.

 

I don't have much practice with using complex GSAP animations so I'll keep that in mind as I continue learning it.

 

Thank you again!