Swiper JS + Gsap

[RhanXerox]

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

[Shrug ¯\_(ツ)_/¯]

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.

[RhanXerox]

Sure...

 

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 ...

[Shrug ¯\_(ツ)_/¯]

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. 😉

[RhanXerox]

Locally I removed the gsap reference from the code and made considerable reductions in durationand delays, it does not work, I already tried and the difference is almost zero

[Shrug ¯\_(ツ)_/¯]

I obviously can’t see what you have done locally. But I highly suggest if you’re new to GSAP then spend time reading through the documentation and various articles before spending time trying to modify others examples for your own use.

[RhanXerox]

What a good help you gave me, sorry for taking your time ...

[akapowl]

 

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)
            .reverse();

 

...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.

 

[Shrug ¯\_(ツ)_/¯]

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.

[RhanXerox]

Thank you very much, @akapowl it works perfectly ... When I finish it I will share it in this forum so that everyone has the reference