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

WOW, very nice. Thank you a lot. It will help me a lot : it's exactly what i need. I'm going to dive into your code to understand deeper the usage of ScrollTrigger. Again, thanks a lot for your detailed answer (oh, and sorry if my english is not perfect : i try my best ?)

I made that pen : i want my 2nd half of my cat to go at the top, meet the first half and then go to the left of the screen and stay here. But I don't really know how to keep the 2nd part of my cat pinned after the end of scroll trigger evenement. Does anyone know how to do that ? Thank you a lot (My first solution was to put the end of the trigger far far away the start it kinda works but when i reverse scroll, the reverse animation starts immediately and it's not what i want )