chain swiper animation using Gsap

[Ysrbolles]

I needed to create an animation like this but the result was not like what I expected, can someone help me, please?

https://www.loom.com/share/1f9c4a135f264b2fae53ba1556a6e88e?sid=692ccf55-7b2e-4735-9680-247604b4c60e

to explain:

I have three images, and I want to make an animation to swipe between the three images,
when the current image goes to disappear the other one comes to the screen

this is my current code:

note: the images will be changed later

 

https://stackblitz.com/edit/stackblitz-starters-oskq2i?file=app%2Fpage.tsx

 

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[mvaneijgen]

Hi @Ysrbolles welcome to the forum! 

 

Without a minimal demo there isn't much we can help with. The animation you shared comes close to the demo I've linked below, so maybe you could use that as a starting point. Hope it helps and happy tweening! 

 

See the Pen eYEXmJm by GreenSock (@GreenSock) on CodePen

[Ysrbolles]

Hello @mvaneijgen @GSAP Helper, I create a demo to make it clear, please check the link below

 

https://stackblitz.com/edit/stackblitz-starters-oskq2i?file=app%2Fpage.tsx

[mvaneijgen]

When sharing a Stackblitz link be sure to include the file we should be looking at.

 

For your setup I would start with all the elements at a known position eg the center all stacked on top of each other. Then you can move them .from() some position and then .to() some other position. If you use staggers you can just write one tween for all elements and with some clever position parameter you can have another tween start animating when the first one is done. Also be sure to use xPercent and yPercent when wanting to tween percentage based values. 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

I think this is going to be your next questions, so I'm going to put this here. If you want things to stagger seamlessly check out the awesome tutorial our own @Carl

 

 

I couldn't work in your Stackblitz, because you had not setup GSAP in the proper way Check out our React  guide https://gsap.com/react. Hope it helps and happy tweening! 

 

See the Pen yLrNeRz?editors=1111 by mvaneijgen (@mvaneijgen) on CodePen