csantos Posted February 13, 2021 Share Posted February 13, 2021 Hey guys, I'm new to gsap, and I want to first thank you all for this amazing library. The examples look pretty neat! Secondly, I'm seeking for some advice or some light on how to implement this crazy animation. * The idea is to have an image centered in the screen with a width based on viewport-width: say 70% initial * When user scrolls (scrub: true) the image has to scale up to occupy the 100% of the viewport width. and this animation has to stop at that point.In this example you see the image (blue-border) being larger than the viewport height and it goes over the bottom of the screen. * When the user keeps scrolling, the image should be kept scaled and scroll normally so we reveal the remaining section of the image. In this example you see the image (blue-border) being larger than the viewport height and now it's over the top of the screen. * When the user keeps scrolling, and only after the bottom of the image (scaled-up) touches the bottom of the viewport, the image will finally scale-down to it's original size I would appreciate any guidance you could provide me.! Link to comment Share on other sites More sharing options...
Solution tailbreezy Posted February 13, 2021 Solution Share Posted February 13, 2021 There are so many ways to achieve this. On top of my mind is this padding-bottom/padding-top hack. See the Pen 4276699bb20421d490ac62763aea9d95 by dadacoded (@dadacoded) on CodePen 4 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 13, 2021 Share Posted February 13, 2021 In general it's good to avoid animating width and height and use scaling instead, but the basic approach of tailbreezy (creating a timeline that does what you need and then attaching a ScrollTrigger to it) is a good one to use. You might benefit from the ScrollTrigger demos section. 2 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