hanjames Posted October 2, 2023 Share Posted October 2, 2023 Hi there, so I want to make a scroll animation of an image that has full width and full height of its parent section, and scale it down back to its original position in a column, I found some possible solution by using a Flip plugin but still don't know how to implement it yet, also I want to perform some intermediary animation like the text reveal sequentially before it can continue to animate back to its column. For now I provided some rough codepen example by using another div directly below the section element and the final position of the image should be in the middle of the 2nd column. See the Pen bGOjXGm by ryanfarhan00 (@ryanfarhan00) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 2, 2023 Share Posted October 2, 2023 Hi @hanjames welcome to the forum! I had to remove your Tailwind classes, because I don't know how to overwrite those when flipping. But you can just do your javascript logic of setting your main image to the position in the column, I've used the following flip demo from the docs https://greensock.com/docs/v3/Plugins/Flip/ See the Pen OJNYjmz?editors=0010 by GreenSock (@GreenSock) on CodePen And added that to your timeline at a point that seems logical. It still needs some tweaking, but I think you can take it from here. See the Pen ZEVjgPB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen As a side note, instead of y: '0%', you can do yPercent: 0. Hope it helps and happy tweening! 1 Link to comment Share on other sites More sharing options...
hanjames Posted October 2, 2023 Author Share Posted October 2, 2023 Thank you so much!, I tweaked it a little bit by removing the image-src child in the image-main and now it's working pretty close. Only one issue though, when I apply mainImage.appendChild(mainImageSrc) then I scroll back everything just goes black, it seems like tween can't run backwards after the flip animation done. Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted October 2, 2023 Solution Share Posted October 2, 2023 Hi, Maybe this examples can help understanding how to use Flip with ScrollTrigger when scrolling in both directions: See the Pen YzZyQqv by GreenSock (@GreenSock) on CodePen See the Pen bGxOjeP by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
hanjames Posted October 3, 2023 Author Share Posted October 3, 2023 @Rodrigo Thanks, rodrigo. It works now!. For me it's the setState method that works inside .add() method, I assume that's because the cleanup process that performed by gsap.context() when I scroll back up. Need some time to grasp the concept though hahaha, but it was a fun challenge nonetheless. 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted October 3, 2023 Share Posted October 3, 2023 I would strongly recommend you to begin with just Flip with some buttons in order to just create Flip animations: https://greensock.com/docs/v3/Plugins/Flip Then you can start by using ScrollTrigger callbacks to create those Flip animations like this: See the Pen ZEmQBQg by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 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