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 шт):

Автор решения: Zhulinskii Danil

Спустя долгих 4 дней дебага я пришел к удалению библиотек и сразу после удаления react-gsap все заработало (Я просто в шоке)

Я тут допустил ошибку не опубликовав свой package.json

Я использовал next.js 14.0.3 gsap и react-gsap

→ Ссылка