Unusual Animation Restart After a Certain Period of Time

[Osemwengie Benjamin]

I'm encountering a problem with using gsap in Nextjs. Once an animation has completed, it inexplicably restarts after a short period of time or whenever a link or button is hovered. This behavior is quite unusual and unexpected.
 

const brandlink = useRef()

useEffect(() => {
  let brandlinkanim = new SplitType(brandlink.current, { types: 'words, lines, chars' });

  gsap.from(brandlinkanim.words, {
            opacity: 0,
            delay: 4.3,
            yPercent: -100,
            rotateX: -90,
            ease: Power3.easeInOut,
            invalidateOnRefresh: false,
            duration: 0.8,
            stagger: { each: 0.06 },
        })
}

 

[GreenSock]

It's difficult to troubleshoot without a minimal demo, but here are some guesses (most are React-related)...

 

It looks like maybe you forgot to include an empty dependency array in your useEffect() (and we usually recommend using useLayoutEffect() for animations): 

useLayoutEffect(() => {
  // animation code
}, []); // <-- IMPORTANT!!!

Without the dependency array, React will call that function on every render. 

 

You're not doing proper cleanup. React 18 calls useEffect()/useLayoutEffect() TWICE in strict mode which can lead to you creating multiple duplicate/conflicting animations. You should certainly get in the habit of using gsap.context() - it's your new best friend in React because it makes cleanup so easy. 

 

Please read this article:

 

You're using the old ease syntax rather than the newer, modern string-based syntax: 

// really old
ease: Power3.easeInOut,
  
// better/new
ease: "power3.inOut",  

I'm not sure why you've got invalidateOnRefresh: false (that's a ScrollTrigger-specific thing that belongs inside a ScrollTrigger config object), but you should definitely remove that. 

 

If you're still having trouble, please provide a minimal demo with only the essential code to clearly illustrate the problem (don't include your whole project). Here's a React starter template you can fork. 

 

Happy tweening!