How to avoid "scroll jump" when killing a pinned scrolltrigger

[guiguiland]

Hello,

 

I have an issue with ScrollTrigger, can anyone help me to fix it ?

I have a full-screen pinned div and I want to see an animation while it is pinned.

At the end of the animation, it is displaying a text.

 

I want that once the animation finishes I can only see the last picture, with the text, and never again the animation (until the next page reload of course).

 

When I try to kill the animation "onLeave", it makes a "scroll jump"

When I try to kill the animation with "once:true", the pin-spacer remains, and I have a big white space above my text

 

Here are 2 pens to show the issue.  In this example, a div becomes yellow when you scroll down, and it must remains yellow at the end of the animation, even if you scroll up again.

 

1) using once (big white space above the div)  :

 

2) using kill ( scroll jump) : 

See the Pen JjBjbYM by Guelid (@Guelid) on CodePen

 

The text just after the scrolltriggered div is in red to highlight the scroll-jump issue

 

Thanks !

 

See the Pen OJEGzGp by Guelid (@Guelid) on CodePen

[akapowl]

 

Welcome to the forum, @guiguiland.

 

Have a look at the threads linked in this post - the first suggestion linked there (the one by OSUBlake) will probably be the best one to have a look at. Those should help with what you are trying to achieve and also offer some more explanation about the process involved.

 

 

[guiguiland]

Waouh, 

Thank you so much !

Looks like I did not search enough on the forum.. sorry for that.

 

Here is the answer that worked for me, in case someone else is interested :

onLeave: function(self) {    
    self.scroll(self.start);    // <-- sets position to start of ScrollTrigger
    self.disable()
    self.animation.progress(1)
  }

 

from .. your previous answer @akapowl 😅