Mixed observer and scrolling. Fade Out of elements in the previous section and Fade In in the current.

[OleksiiR]

Hi

 

I am trying to create an animation. In a certain section (slides-container), blocks appear when scrolling, and the section is fixed. After the usual scroll down.
Now I'm adding a class to the current slide and removing it from the previous one. But after scrolling up, the last one doesn't fire. It is also possible to scroll directly to the third slide while the second animation has not yet completed, which should not be.

I would be very grateful for help

See the Pen ExpgovX by oleksii-reshetnik (@oleksii-reshetnik) on CodePen

[Rodrigo]

Hi @OleksiiR and welcome to the GreenSock forums!

 

Basically some of your logic needed some tinkering in order to accommodate your particular scenario that is a bit different from the codepen example you extracted most of the logic.

 

Her you can see it working:

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

 

Hopefully this helps in your project. Let us know if you have more questions.

 

Happy Tweening!

[OleksiiR]

Hi @Rodrigo.
Thanks for your reply.
I have one more question.
How to fix a section (.slides-container). This section is screen full height. If I scroll quickly, I move to other sections before the last slider is displayed.
The logic is this. I'll scroll down to the section (.slides-container). Then the section is fixed. Slides change as you scroll. And only after the last one is displayed, I can scroll further in the usual way.

[Rodrigo]

Hi,

 

I added some extra logic in the onLeave and onLeaveBack callbacks. Basically the idea is to check if the current index matches the number that should have on a regular scroll action. If it doesn't it forces the ScrollTrigger instance to the start/end position:

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

 

Hopefully this helps. Let us know if you have more questions.

 

Happy Tweening!