juliangarnier / anime

JavaScript animation engine
https://animejs.com
MIT License
50.4k stars 3.68k forks source link

anime isn't working with amp.dev in Next js #846

Open dhavalveera opened 1 year ago

dhavalveera commented 1 year ago

Describe the bug I have implemented anime with my Nextjs project and it's working properly, but when I am integrating/implementing amp.dev then anime isn't making any text animation, below is the anime code I've written in nextjs

const TextAnimation = () => {
   useEffect(() => {
    const textWrapper = document.querySelector('.name')
    textWrapper.innerHTML = textWrapper.textContent.replace(
      /\S/g,
      "<span class='letter'>$&</span>",
    )

    anime
      .timeline({ loop: true })
      .add({
        targets: '.name .letter',
        scale: [4, 1],
        opacity: [0, 1],
        translateZ: 0,
        easing: 'easeOutExpo',
        duration: 950,
        delay: (el, i) => 70 * i,
      })
      .add({
        targets: '.job_role',
        opacity: 0,
        duration: 1000,
        easing: 'easeOutExpo',
        delay: 1000,
      })
  }, [])

  return (
     <div class='name'>Dhaval Vira</div>
   )
}

this code is giving text animation when there's no amp.dev Integration, but when I integrate the amp.dev then it stops working, please help on this

Desktop (please complete the following information):