scrolltrigger Vertical slideshow doesn't work properly

[Alain Nobilito]

Hello.

 

I'm facing a problem with an animation i want to create with scrollTrigger. I join a codepen to explain my issue.

 

I have a div .slides between other content and it's composed of several slides. When i reach my div .slides, I want it to pin to the window and its slides should be displayed progressively, sliding from the bottom of the screen. When the last slide is  displayed, the rest of the content must scroll normally.
 

I tried multiple thing but i failed

 

Anyone to help me and show me what's wrong in my code. I would be grateful

Thank you

 

See the Pen yLrqWMP by alain-nobilito (@alain-nobilito) on CodePen

[mvaneijgen]

First of this is really important! ScrollTrigger can only be on the whole timeline or on a single gsap.to() (or .from()) tween. As soon as you define a timeline ScrollTrigger needs to control the whole timeline, it can't control individual tweens that are on a timeline, logically this is impossible.

 

Next 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 placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! 

 

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