GSAP Не повторяет анимацию при повторном заходе на страницу
Анимация проигрывается пока я нахожусь на странице впервые, после того как я выхожу и захожу обратно - анимация перестает проигрываться
Я пробовал:
- timeline ложить в useRef
- gsap.context и в дальнейшем revert
- Вручную timeline чистить с помощью kill
Простой пример который так же у меня не работает:
import gsap from 'gsap'
import { useEffect } from 'react'
export function Component() {
useEffect(() => {
const obj = { n: 0 }
// Это будет работать только пока я нахожусь на странице впервые
// Если я зайду в /about, или любую другую страницу, и вернусь обратно,
// блок кода ниже - перестанет работать и выводить в консоль объект
// Хотя если посмотреть в _gsap то id анимации отличается от предыдущей
// Так же перестают работать не только to но и from, timeline и прочие штуки
// с помощью которых можно плавно менять значения
gsap.to(obj, {
n: 1000,
duration: 1,
onUpdate() {
console.log(obj.n) // 0 - 1000
}
})
}, [])
return <></>
}
Я встречал похожую проблему на сайте gsap где так же задают вопросы, и у человека была такая же проблема, но на codesandbox его пример работал (так же как и мой), но локально и после билда ничего не работало
Вот ссылка на сайт где текст с такой же проблемой https://next-resume-hazel.vercel.app/
Дождитесь полной анимации и перейдите в about, после вернитесь обратно тыкнув на RESUME а header'е и текст не станет снова анимироваться
Если вам не трудно можете связаться со мной в тг https://t.me/ZhulinskyDanil
Ответы (1 шт):
Спустя долгих 4 дней дебага я пришел к удалению библиотек и сразу после удаления react-gsap все заработало (Я просто в шоке)
Я тут допустил ошибку не опубликовав свой package.json
Я использовал next.js 14.0.3 gsap и react-gsap