arual Posted June 3, 2021 Share Posted June 3, 2021 Hi everyone, I'm new to GSAP and I really need some help with my project. I want to achieve something like this (see attached image) - in the hero section I have an image and when scrolling the image somehow move diagonally and transform itself in a second image when the second section is shown. Any idea? Every little help is much appreciated. Link to comment Share on other sites More sharing options...
Cassie Posted June 3, 2021 Share Posted June 3, 2021 This looks like a problem for the Flip plugin and ScrollTrigger! Take a look at the docs and give it a bash. If you're still stuck feel free to come back with a minimal demo and we'll see if we can figure it out together. ☺️ Link to comment Share on other sites More sharing options...
arual Posted June 3, 2021 Author Share Posted June 3, 2021 1 hour ago, Cassie said: This looks like a problem for the Flip plugin and ScrollTrigger! Take a look at the docs and give it a bash. If you're still stuck feel free to come back with a minimal demo and we'll see if we can figure it out together. ☺️ Thanks. Is there any other option? Maybe just with the scrolltrigger? i'm only trying to learn gsap so it would be great if i could use free resources. Link to comment Share on other sites More sharing options...
_Greg _ Posted June 3, 2021 Share Posted June 3, 2021 4 minutes ago, arual said: Maybe just with the scrolltrigger? Hi! In scrolltrigger documentation page you will find a lot of examples (on bottom of the page), i think you will find what you want there. Or you can find examples in ScrollTrigger Demos page. 2 Link to comment Share on other sites More sharing options...
Cassie Posted June 3, 2021 Share Posted June 3, 2021 Sure. You can do it yourself but it won't be simple. TLDR - you have to calculate start and end positions and animate between them. FLIP stands for First, Last, Invert, Play. First: the initial state of the element(s) involved in the transition. Last: the final state of the element(s). Invert: here’s the fun bit. You figure out from the first and last how the element has changed, so – say – its width, height, opacity. Next you apply transforms and opacity changes to reverse, or invert, them. If the element has moved 90px down between First and Last, you would apply a transform of -90px in Y. This makes the elements appear as though they’re still in the First position but, crucially, they’re not. Play: switch on transitions for any of the properties you changed, and then remove the inversion changes. Because the element or elements are in their final position removing the transforms and opacities will ease them from their faux First position, out to the Last position. Here's a good place to start reading up on it. - https://aerotwist.com/blog/flip-your-animations/ If you're just playing around on codepen then you can use the FLIP plugin for free. From a learning perspective - I might suggest that you start with something a little simpler and work your way to this? Although, throwing yourself in at the deep end is sometimes a fun way to learn. 4 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