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