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 <></>
}