Scrolltrigger kill after completed

[krisxtina]

Hello. This is scroll trigger demo, Image comparison on scroll. I don`t understand how I can stop this image animation after it is completed. Can you please help me? If I use tl.kill() or tl.scrollTrigger.kill() - something strange happens. Or, my screen continue be in position fixed, I don`t want it. 

 

 

 

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

[SteveS]

What do you mean "stop it after it is completed"? As in, when you scroll back up it doesn't do it again?

[krisxtina]

Yes, I mean when you start scroll, section is fixed and image changes. When it is completed, I want that when we scroll up, back, positions looks static, and I have the last image as result. 

[SteveS]

I'm not entirely sure that is possible with ScrollTrigger. When you make a pin, you have a bunch of extra scrolls space added onto the page for the duration of that pin. Removing that space would make the page jump. Hopefully someone with more experience can chime in.

[akapowl]

Hey there @krisxtina

 

You might want to have a look at this thread - it links to some other threads with some suggestions on how to handle that.

 

 

 

 

The first one linked in there probably has the most complete piece of code:

 

 

 

 

... I just quickly threw it into that demo pen you posted and this is the result. Does that look like what you are after ?

 

See the Pen PoQBQzq by akapowl (@akapowl) on CodePen

 

[krisxtina]

Thank you very much for information. The last codepen - this is what exactly I`m looking for