Delay page scroll until GSAP animation complete

[JordanM 2 Likes (Newbie)]

I'm creating a landing page and using GSAP to animate some text according the the user's scroll position.

 

How can I keep the landing page in full view and only start scrolling down the page once the text animation has reached its end?

See the Pen bQxKxK by TheJordanM (@TheJordanM) on CodePen

[OSUblake 9,990 Likes (Superhero)]

You can probably use sticky positioning.

https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

 

[OSUblake 9,990 Likes (Superhero)]

I saw you made a comment earlier. Did you get it working? You can change positioning back to normal once it's scrolled out of view.

[JordanM 2 Likes (Newbie)]

1 hour ago, OSUblake said:

I saw you made a comment earlier. Did you get it working? You can change positioning back to normal once it's scrolled out of view.

I had played with fixed positioning and hiding it once you had scrolled far enough but it was messy. Sticky positioning was exactly what I was looking for so thank you!