RhanXerox Posted March 23, 2021 Share Posted March 23, 2021 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 More sharing options...
Shrug ¯\_(ツ)_/¯ Posted March 23, 2021 Share Posted March 23, 2021 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. 3 Link to comment Share on other sites More sharing options...
RhanXerox Posted March 23, 2021 Author Share Posted March 23, 2021 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 ... Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted March 23, 2021 Share Posted March 23, 2021 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 More sharing options...
RhanXerox Posted March 23, 2021 Author Share Posted March 23, 2021 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 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted March 23, 2021 Share Posted March 23, 2021 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. 1 Link to comment Share on other sites More sharing options...
RhanXerox Posted March 23, 2021 Author Share Posted March 23, 2021 What a good help you gave me, sorry for taking your time ... Link to comment Share on other sites More sharing options...
Solution akapowl Posted March 23, 2021 Solution Share Posted March 23, 2021 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. 3 1 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted March 24, 2021 Share Posted March 24, 2021 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. 2 Link to comment Share on other sites More sharing options...
RhanXerox Posted March 24, 2021 Author Share Posted March 24, 2021 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 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