Ysrbolles Posted March 4 Share Posted March 4 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 Link to comment Share on other sites More sharing options...
GSAP Helper Posted March 4 Share Posted March 4 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. ✅ 1 Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 4 Share Posted March 4 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 1 Link to comment Share on other sites More sharing options...
Ysrbolles Posted March 4 Author Share Posted March 4 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 Link to comment Share on other sites More sharing options...
mvaneijgen Posted March 4 Share Posted March 4 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 2 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