Animations restart when an unrelated component button is clicked in Nextjs

[kvncnls 4 Likes (Newbie)]

// Parent Component
export default function ParentComponent() {

  const [title, setTitle] = useState('values');

  const changeContent = (title) => {
    setTitle(title);
  }

  const bgRef = useRef(null);
  const mainRef = useRef(null);
  const bgTransitionRef = useRef(null);

  useEffect(()=>{
    const tl = gsap.timeline();

    tl.fromTo(bgTransitionRef.current,
        {y: 0, skewY: 0},
        {y: "-120vh", skewY: 4, duration: 1.2, ease: "power4.inOut"})
      .fromTo(bgRef.current,
        {filter: "brightness(3) grayscale(150%)"},
        {filter: "brightness(1) grayscale(0%)", duration: 1.2})
      .fromTo(mainRef.current,
        {y: 150, autoAlpha: 0},
        {y: 0, autoAlpha: 1, duration: 1.2, ease: "power3.inOut"}, "<0.5")
  })
  
  return (
    <div className="parent-component">
    	<img className='bg-background' src="/assets/clouds.png" ref={bgRef} />
        <div className="bg-transition" ref={bgTransitionRef} ></div>
    	<ChildComponent changeContent={() => changeContent('values')} />
    <div/>
  )
}


// Child Component

export default function ChildComponent(props) {

  return (
    <div className="child-component" onClick={props.changeContent}>
        <h4>{props.title}</h4>
    </div>
  )
}

Alrighty, so what's happening is that whenever I click the ChildComponent, it should run a function called 'changeContent'.

It does change the content when I click it. But what it also does is that it restarts all of the GSAP animations.

Why is it doing this? And how can I prevent it from happening?

[kvncnls 4 Likes (Newbie)]

Nevermind, I solved it.

I had to add an empty array '[]' to the useEffect hook.