GGQa Posted August 30, 2021 Share Posted August 30, 2021 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 More sharing options...
Solution akapowl Posted August 30, 2021 Solution Share Posted August 30, 2021 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 6 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now