[Vertical slideshow doesn't work properly]

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

[[ScrollTrigger] How to keep element pinned after end of scroll trigger]

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 😋)

[[ScrollTrigger] How to keep element pinned after end of scroll trigger]

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  )

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