Image animation on hover with GSAP and Swiper.js

[GGQa]

Hey,

I'my trying to make a slider for my project using gsap... I wish after scrolling the middle slide was opacity:1 and the rest of the pictures were opacity: 0. I would like the active middle image to be set to opacity: 1 only after end of animation (when it sets itself in the middle position - end transform) . How to do it with Gsap? 

Thanks!

See the Pen ExXPaaW by GGQa (@GGQa) on CodePen

[akapowl]

 

Hey there @GGQa

 

You will have to find a way within the logic of swiper to toggle the opacity.

Swiper is not a GreenSock product and thus support for it is actually not offered in these forums.

 

Here you'll find a list of events for swiper.js

https://swiperjs.com/swiper-api#events

 

One very basic way could be to use swiper's slideChangeTransitionEnd event to tween all images to opacity 0 but/and the one in the swiper slide that is active to 1. Something like in this example below - but I have no idea if it is the best way to do it, as I'm not very firm with swiper. Anyone having a better approach is of course welcome to help, but in general these forums try to stay focussed on GSAP-specific questions. Hope that helps, though.

 

See the Pen 8b5fd3a7d0ecddcbeb7a230b49fe13db by akapowl (@akapowl) on CodePen

 

 

Edit:

Here are two more approaches for the tween itself.

 

One is using a forEach loop (commented out here) and one is using function based values with the target passed into the function. Both utilize a ternary operator for the tween to check wether the target's parentElement (the swiper-slide container) has a class of swiper-slide-active - if it does, the opacity will be tweened to 1, else it will be tweened to 0.

 

See the Pen 85cca33c373c2ca1d789f681150d9e8a by akapowl (@akapowl) on CodePen