How is the animation performed when the Swiper slider is scrolled?

[AlexanderGS]

Good afternoon!
Need some help!!! 
Been trying to figure out how to make an animation for each element when scrolling the slider for a few days now.
Made a small example, in a nutshell. 
The slider has a swiper-slide-active class. It's needed to display active slides.
I added custom navigation buttons and applied the findElement function to them. This function finds an element with the swiper-slide-active class and adds an anim class to it for animation.
The useEffect hook contains only custom navigation buttons, it can be ignored.
The useLayoutEffect hook contains the initial gsap animation when the page first loads.

I figured out the initial gsap animation, but I don't understand how to make the animation when the slider is scrolling.  Any solutions or advice would be appreciated.
Thanks for your consideration!

 

codesandbox

[Carl]

Thanks for the demo. I don't use React at all so I can't help much with your actual project.

 

However, I am working on a Swiper lesson for my GreenSock courses so I can share the following as a basic "work in progress" to show how to get the 2 to work together. 

 

See the Pen XWBNJjK?editors=1010 by snorkltv (@snorkltv) on CodePen

 

Despite not being able to help you with React I have a few thoughts on what you're doing:

 

My strong personal opinion is: try to break free of the mindset of "adding css classes to things to trigger animations". Swiper offers events that you can use to trigger your GSAP animations. In my example everything is triggered via the "slideChange".

 

Next, I'm a bit lost on how you plan to implement scrolling but right now your page doesn't scroll at all. I see what appears to be 3 tweens with ScrollTriggers assigned but I don't understand how the triggers are supposed to enter and leave the viewport to trigger the animations. 

 

If your carousel is going to be "locked in place" and your page doesn't scroll, I think you could use Observer to help you out. It shouldn't be too hard to wire it up to tell Swiper to go to the next or previous slides.

 

Hopefully this helps you understand an alternate approach and you can better decide what will work best for your project.

 

[AlexanderGS]

Hello, @Carl
Thank you for pointing out the correct hint to my question. As you wrote, I need to use slideChange. That's what helped me to find a solution under React.
Thanks for taking the time to answer my question!😄