How to wait the animation-end before unpin the trigger?

[this_is_giulio]

Hi,

 

I’m using ScrollTrigger to make sections appear one after the other in sequence. I would like the sections to appear with a normal fade-in and disappear with a fade-out. To keep the sections fixed, I’m using `pin: true`.

 

Moreover

• The next section must appear without “spacing” from the previous one (one fades out while the other fades in).
• The enter and exit animations must not follow the scroll. Once started, they should complete in 1s, like a normal tween. 

Here is the POC: See the CodePen at the bottom of the post.

 

Question: when the section is deactivated (e.g., `onLeave`), the pin state is removed, and during the exit animation, I see the section scrolling up or down depending on the scroll direction. How can I keep it fixed, at least until the exit animation is finished?

 

To clarify my question, I created a second POC that does exactly what I asked but significantly changes the markup by moving sections out of the scroll. I would like to avoid moving content outside of `#smooth-wrapper`. 

See the Pen KwPeWaG by giuliocollesei (@giuliocollesei) on CodePen.

 

 

 

Thank you for your attention 

See the Pen WbeyGeM by giuliocollesei (@giuliocollesei) on CodePen.

[Rodrigo]

Hi,

 

If your animation depends on scrolling position there aren't a lot of approaches that can do that. If you pin an element and use toggleActions is always possible that if the user scrolls fast enough that can go through that section without watching the animations complete. One approach is to disable scrolling by updating the overflow property on the body element (not really elegant though).

 

Another option is to use the Observer Plugin:

https://gsap.com/docs/v3/Plugins/Observer/

 

Here is a demo that combines ScrollTrigger with Observer:

See the Pen ExEOeJQ by GreenSock (@GreenSock) on CodePen.

 

Yet another option is to pin those sections for the entire document, so they are always visible until an element after them moves over and covers them, similar to this demo

See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[this_is_giulio]

I didn't know about the Observer plugin; I think it is better for what I'm trying to achieve!
Thank you