Joey Leon Posted October 4, 2023 Share Posted October 4, 2023 (edited) I've created this animation, so as I scroll the image zooms out to reveal the 'full' image. However it only works in this scenario as the values are hard coded. I'm finding it difficult when I'm using this as a component/section of my home page that has multiple sections, it will only act as if this was the 'starting' page in my viewport. I've thought about a parallax effect on the z-axis but I want the animation to end when bottom of my screen hits the (bottom of img + 0.5 img height). Once the animation ends I want the image to be static and not animate anymore, even if I scroll up and back down. I'm guessing I would need to use scroll trigger but I'm not sure what to use in order to do the 'zoom out' effect. EDIT: FIXED MY SOLUTION: The youtube video about focusing on my animations first before scrolltrigger helped me figure out what to do! See the Pen xxmyKXW by Joseph-Leonardi (@Joseph-Leonardi) on CodePen Edited October 4, 2023 by Joey Leon Figured out my solution 2 1 Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted October 4, 2023 Solution Share Posted October 4, 2023 Hi @Joey Leon welcome to the forum and thanks for being a Club Greensock member 🎉 Was it this video? Just for reference. Glad you solved your own issue! Happy tweening! 1 Link to comment Share on other sites More sharing options...
Joey Leon Posted October 4, 2023 Author Share Posted October 4, 2023 Yes, that was the video! I wasn't thinking in the right direction, until that video. Thanks for the reply! 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