react GSAP Does not repeat animation when re-entering the page

[Zhulinskiy Danil]

The animation plays while I'm on the page for the first time, after I exit and come back - the animation stops playing

I tried:
timeline put in useRef
gsap.context and subsequently revert
Manually clear timeline using kill
A simple example that also doesn’t work for me:

 

Here is a link to a site where the text with the same problem is https://next-resume-hazel.vercel.app/

Wait for the full animation and intensity approximately, then go back by clicking on the RESUME title and the text will not animate again.

 

(This post was completely translated using google translator, sorry if anything is not clear)

 

import gsap from 'gsap'

import { useEffect } from 'react'

export function Component() {
  useEffect(() => {
    const obj = { n: 0 }
    
    // This will only work while I'm on the page for the first time
    
    // If I go to /about, or any other page, and go back,
    // code block below - will stop working and output the object to the console
    // Although if you look in _gsap the id of the animation is different from the previous one

    // Also, not only to but also from, timeline and other things stop working
    // with which you can smoothly change values
 
    gsap.to(obj, {
      n: 1000,
      duration: 1,
      onUpdate() {
        console.log(obj.n) // 0 - 1000
      }
    })
  }, [])

  return <></>
}

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by a third party library, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a React starter template that you can fork. (please read this article!)

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Zhulinskiy Danil]

I was able to find the problem, I don't know why but after removing the npm package react-gsap the problem went away, to install react-gsap using next.js I had to use npm i legacy-peer-deps (maybe that was the problem)
 

I really hope this article will help someone in the future.

Thank you for your message ❤️

[GreenSock]

Thanks for letting us know. And for the record, that react-gsap package is NOT an official GreenSock one. 

 

You might want to check this out: 

https://www.npmjs.com/package/@gsap/react