Sukru Posted October 13, 2023 Share Posted October 13, 2023 Hello, I want the perspective to improve as the scroll moves down, and then I want the scroll to continue. In my example, the perspective improves, but the scroll does not have a pin, it moves normally. Can you help me? See the Pen OJrGXLZ by sukruemanet (@sukruemanet) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted October 13, 2023 Share Posted October 13, 2023 I would set the will-change via CSS, that way the browser will know what to do with the elements as soon as possible. You're animating your trigger element, that is a no go with ScrollTrigger, so I've changed that to use the figure element (.image), and I've set transform-origin: top center (by default it is the center of the element). Is that what you're looking for? See the Pen GRPLOwY?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
Sukru Posted October 13, 2023 Author Share Posted October 13, 2023 @mvaneijgen Hell, why does it go inside the spacer div? I actually wanted the spacer div to continue when the scroll animation finished Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted October 13, 2023 Solution Share Posted October 13, 2023 Because of you CSS I've removed some things and moved CSS around, but due to some other containers CSS it overlaps with the spacer. See the Pen WNLWMyJ?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen 3 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