Jump to content
Search Community

Swiper JS + Gsap

RhanXerox test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Greetings everyone ... I have tried to integrate swiper js with gsap, but it doesn't work, animations go crazy as you navigate between sliders.
I also tried to make an integration with this slider present in the forum and it doesn't work either, the animations all fire at the same time and I can't find a way to control it, when going from the first slider to the second or the third, the animations are finished, and not I can make them reboot



This code does not work, the animations become extremely slow when doing the code as shown in the example, if we update it to gsap 3.6 the animations fire all at the same time, the same with all the versions that I have tried to integrate.


Is there a way to integrate Gsap 3.6 + Swiper JS?

See the Pen NWPJeyg?editors=0110 by mikeK (@mikeK) on CodePen

Link to comment
Share on other sites

Hi @RhanXerox welcome to the forum.


But I’m confused, that codepen is by @mikel and has nothing to do with Swiper. It seems to work fine to me ?


Even without seeing an example I would guess it’s not a GSAP issue at all. But an event logic integration issue with Swiper, or a general code logic issue. But without seeing a minimal demo demonstrating the specific issues you are having it's impossible to help. If the issue is relative to GSAP someone will try to help, though we try to keep questions centered on the GSAP aspect.

  • Like 3
Link to comment
Share on other sites



See the Pen rNjaqJb by rhanxerox (@rhanxerox) on CodePen


As you can see the first two initial sliders at the same time, but the rest of the sliders work as they should.

If for example I remove the word gsap from the code:
".from ('# slide01 .olivoSt', {autoAlpha: 0, duration: 3, y: -200, ease: 'expo.inOut'})"
it works but the animations unfold very, very slowly ...

Link to comment
Share on other sites

I’m not too familiar with that codepen by Mikel.


But after a quick glance comparatively, you need to remove the gsap reference in front of all your .from tweens and make it just .from without the gsap reference. Then the first two slides should work fine the same as his example using the array reference.


Regarding things being slow, that is due to your long durations (3 , 5 etc.,) and long delays (1.2, 2, etc.,) if you want it to be fast. Simply reduce those to your liking to speed the sequence up of things.


Its not really a minimal demo but that’s what I noticed with a quick glance. 😉

Link to comment
Share on other sites

  • Solution


The animations in mikels demo are connected to set up timelines (respective for each section) and these timelines (with their individual tweens) only get triggered when that respective section comes into view. Since in your demo you have your own animations set up as single tweens, they will fire right away depending on the delay you have set to them. So as @Shrug ¯\_(ツ)_/¯ already stated, you would first have to remove the gsap in front of all your tweens.


Now you have made sure that those tweens are connected to that respective timeline that is named in the line above. But since now they are connected to the timeline they will be played one after the other with your delay now not being the delay from the start/zero anymore but from the previous tween. So you basically want to take your delay and put it in the position parameter instead ( more about that right below the video in the docs). If you don't have a delay set, make sure that tween starts at 0.


So this


        animations[0] // Smart Training ======
            gsap.from('#slide01 .olivoSt',{autoAlpha: 0, duration: 3, y: -200, ease: 'expo.inOut'})
            gsap.from('#slide01 .selloSt',{autoAlpha: 0, duration: 5, y: 200, ease: 'expo.inOut'})
            gsap.from('#slide01 .jumping',{autoAlpha: 0, delay: 1.2, duration: 4, y: 300, ease: 'elastic.out(1, 0.3)'})
            gsap.from('#slide01 .anima1',{autoAlpha: 0, delay: 2, duration: 2, y: -30, stagger: 0.7})
            gsap.from('#slide01 .tituloSt',{autoAlpha: 0, delay: 2, duration: 3, x: 100, ease: 'expo.inOut'})


would become this


        animations[0] // Smart Training ======
            .from('#slide01 .olivoSt',{autoAlpha: 0, duration: 3, y: -200, ease: 'expo.inOut'}, 0)
            .from('#slide01 .selloSt',{autoAlpha: 0, duration: 5, y: 200, ease: 'expo.inOut'}, 0)
            .from('#slide01 .jumping',{autoAlpha: 0, duration: 4, y: 300, ease: 'elastic.out(1, 0.3)'}, 1.2)
            .from('#slide01 .anima1',{autoAlpha: 0, duration: 2, y: -30, stagger: 0.7}, 2)
            .from('#slide01 .tituloSt',{autoAlpha: 0, duration: 3, x: 100, ease: 'expo.inOut'}, 2)


...as you also missed the .reverse() at the very end. Same concept applies for that other section of yours.


This should work as expected - give it a shot.


  • Like 3
  • Thanks 1
Link to comment
Share on other sites

I’m really sorry you felt frustrated like that @RhanXerox , certainly not my intention at all. As mentioned, I only looked at things with a quick glance, thankfully 😉  @akapowl looked at things a bit closer. Please remember that this forum is a genuinely friendly place so please try to remain courteous towards members and throughout threads.


Hopefully you can get things working now.

  • Like 2
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.
  • Create New...