Jump to content
Search Community

Unusual Animation Restart After a Certain Period of Time

Osemwengie Benjamin test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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


Link to comment
Share on other sites

  • Solution

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...