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

[fawad4Real]

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:

https://codesandbox.io/s/gsap-animation-issue-k3g7yl?file=/src/App.js

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

See the Pen by static (@static) on CodePen

[mvaneijgen]

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! 

[fawad4Real]

@mvaneijgen Sorry for the error, I have solved the error in my pen.

[mvaneijgen]

Can you post the new link? The old one still has the errors and have you looked in to the scrollTo plugin? Can you share any new findings you did while testing it?