AlexeiD Posted June 17, 2023 Share Posted June 17, 2023 Hello! Hope you are well! I have a minimal markup on the attached Codepen. How can I achieve an animation using GSAP like this: when I click or hover on a trigger on the right side I want to make the exact index box on the left to be like featured on top and the other items to move on the bottom row based on the trigger that I clicked, reordering the other divs on the left (clockwise and counter clockwise) based on the selection. See the Pen zYMqRVq by Alexandru-Dinca-the-styleful (@Alexandru-Dinca-the-styleful) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted June 19, 2023 Solution Share Posted June 19, 2023 Hello Alexei, welcome to the GSAP forum. We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations - please read the Forum Guidelines. One way you could handle animating the re-ordering of the elements on the left, would be to use the FLIP Plugin. Here is a rather basic example - all the logic around that for achieving what you have in mind would be yours to figure out though. If you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. Good luck with the project. See the Pen VwVjvgG by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
Rodrigo Posted June 19, 2023 Share Posted June 19, 2023 Hi, Maybe this examples could provide some inspiration: See the Pen JjXqMZK by GreenSock (@GreenSock) on CodePen See the Pen YzreJZG by pehaa (@pehaa) on CodePen See the Pen bGeZjoJ by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 1 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