Link anchor

[Sukru]

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.

[Rodrigo]

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!