Sukru Posted October 17, 2023 Share Posted October 17, 2023 Hello, I use link anchor in my project to scroll within the page, but when I use the "fadeup" animation in my project, the "anchor" throws the page down a little with an incorrect calculation. can we help? See the Pen zYyVpyd by sukruemanet (@sukruemanet) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted October 17, 2023 Solution Share Posted October 17, 2023 Hi, Basically the problem is that when you click on your links, the current position of the element is offset by this animation: const anim = gsap.fromTo(box, { autoAlpha: 0, y: 200, willChange: "transform" }, { duration: 1, autoAlpha: 1, y: 0, willChange: "transform" }); So the Y position is off by 200 pixels when you click the link. The position the browser is getting is the correct one the problem is that since you have a GSAP fromTo() instance the element is rendered by that starting position you're giving it in the fromTo configuration. The best approach is to wrap everything in an element with the class fadeup and make that a child of the element with the hash: See the Pen QWzXBQV by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 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