Having trouble with pin spacing

[LSchneiderman]

I want to have an image scroll up, freeze, then another image scroll over it, then the background image unfreeze and the next screen scroll up directly under the frozen image. But I'm having trouble getting that first image to freeze for the requisite amount of time. I'd like some space at the bottom of the scrolling image. Help?

 

 

See the Pen GRavoRK by lschneiderman (@lschneiderman) on CodePen

[mvaneijgen]

Everything in GSAP starts with an animation, so you first have to build the animation before you think about doing anything with scrolling. To define it simpler nothing is really scrolling, elements are moving on the y-axis, which when you hook it up to ScrollTrigger creates the illusion of things scrolling. 

 

Check out my post on creating a stacking card effect, this is all the logic you'll need. Hope it helps and happy tweening! 

 

 

[Rodrigo]

Hi,

 

I'm not 100% sure I follow what you're trying to do here, so I took my best guess and came up with this:

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

 

Most likely you're looking for setting and end point and an endTrigger:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#end

 

Hopefully this helps.

Happy Tweening!

[LSchneiderman]

The endTrigger is what I really needed. Thank you!