clhomme Posted July 11, 2023 Share Posted July 11, 2023 Hello everyone! So, basically what the title says. I would like the pink dot to expand as I scroll until it covers the screen completely, and then while I keep scrolling it "reduces" until it gets to the size and position of the yellow block. I have the first part of the animation (the dot expanding) thanks to this forum (^^), but I'm stuck for the second part. Is it possible to use two Flip animations one after the other, and if so, how? Do I need to use a timeline? I've tried making a new Flip animation, but the results were... not good. I don't think I've fully grasped how Flip works, which is why I'm asking for help ^^. Thank you very much for your help! See the Pen OJazyad by Dhandelyon (@Dhandelyon) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted July 11, 2023 Share Posted July 11, 2023 Hi, This should boil down mainly to re-parenting the element on each section or part of your DOM and create the ScrollTrigger setup that goes along with that. Is a bit hard to come up with something based on the current setup you have especially since you're calling the doFlip method twice. A working approach to something similar can be seen here: See the Pen ZEmQBQg by GreenSock (@GreenSock) on CodePen Hopefully this helps get you started. Happy Tweening! Link to comment Share on other sites More sharing options...
clhomme Posted July 12, 2023 Author Share Posted July 12, 2023 @Rodrigo Oh sorry ! I didn't see I called the Flip method twice. Rectified it 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