Jump to content

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

Image animation on hover with GSAP and Swiper.js

Go to solution Solved by akapowl,

Recommended Posts


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? 


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



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




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.