Jump to content
Search Community

On React the Anchor tag jump scroll dont run the animation.

fawad4Real test
Moderator Tag

Recommended Posts

Hello everyone,

I have a React app with a number animation that activates when we scroll down. The animation works fine with regular scrolling. However, when I click an Anchor tag <a href="#section">  to jump-scroll to a section below, the animation doesn't play. Even after scrolling up and down again, the animation still doesn't work.

I need some guidance on how to fix this issue.


Link to sandbox:


Note: also, can someone tell me how to embed codesandbox in my form? 

See the Pen by static (@static) on CodePen

Link to comment
Share on other sites

Hi @fawad4Real your minimal demo does nothing on my end and I get two errors in the console. 


Warning: Invalid DOM property `class`. Did you mean `className`?
Warning: The tag <number> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

I'm no React expert, but I know you need to do proper clean up in React 18 otherwise things will fire twice and break check out this post, mainly the  gsap.context() topic. 


When using anchor links the browser will just jump to a point on the page I'm not 100% certain, but if ScrollTrigger sees that some one is scrolling with X amount of pixels a second it will stop all animations, because you're going to fast to see any of it. GSAP has a plugin aptly named ScrollToPlugin https://greensock.com/docs/v3/Plugins/ScrollToPlugin with which it you can simulate scrolling to something setting things like speed and ease, which will make it so your ScrollTrigger animations will still play like you want them to be. 


I hope with this info you can fix your issue, if not please update your minimal demo so that its working (or has no errors) and someone will be happy to help you out. Hope it helps and happy tweening! 

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...