Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
GGQa

Image animation on hover with GSAP and Swiper.js

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

 

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

 

 

 

  • Like 6
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×