thejessewinton

I have a TimelineLite timeline set up on my Gatsby site to animate my hero section when a user navigates to a page. However, I'm running into an issue; whenever a user clicks a link to the page they're currently on, i.e. if they are on the homepage and click a link to the homepage, every timeline throughout my components is being reset. I'm using useEffectand my Timelineis stored in a statebut I'm still running into this issue. Here is my full herocomponent, and timelines in other components are set up and run exactly the same way. import React, { useEffect, useRef, useState } from 'react'; import css from 'classnames'; import { ArrowButton } from 'components/arrow-button/ArrowButton'; import { HeadingReveal } from 'components/heading-reveal/HeadingReveal'; import { gsap, Power2, TimelineLite } from 'gsap'; import { RichText } from 'prismic-reactjs'; import htmlSerializer from 'utils/htmlSerializer'; import { linkResolver } from 'utils/linkResolver'; import s from './Hero.scss'; gsap.registerPlugin(TimelineLite, Power2); export const Hero = ({ slice }: any) => { const linkType = slice.primary.link._linkType; const buttonLink = linkType === 'Link.document' ? slice.primary.link._meta : slice.primary.link.url; const theme = slice.primary.theme; const image = slice.primary.image; const contentRef = useRef(null); const headingRef = useRef(null); const copyRef = useRef(null); const buttonRef = useRef(null); const [tl] = useState(new TimelineLite()); useEffect(() => { tl.to(contentRef.current, { css: { visibility: 'visible' }, duration: 0 }); tl.from(headingRef.current, { y: 65, ease: Power2.easeOut, duration: 1 }); tl.from(copyRef.current, { opacity: 0, y: 20, ease: Power2.easeOut, duration: 1 }, 0.5); tl.from(buttonRef.current, { opacity: 0, y: 10, ease: Power2.easeOut, duration: 1 }, 1); }, [tl]); return ( <div className={css(s.hero, s[theme])} style={{ background: image ? `url(${image.url})` : 'white', }} > <div className={s.hero__container}> <div className={s.content__left} ref={contentRef}> <HeadingReveal tag="h1" headingRef={headingRef}> {RichText.asText(slice.primary.heading)} </HeadingReveal> <div className={s.content__copy} ref={copyRef}> {RichText.render(slice.primary.copy, linkResolver, htmlSerializer)} </div> <div className={s.content__button} ref={buttonRef}> <ArrowButton href={buttonLink}>{slice.primary.button_label}</ArrowButton> </div> </div> </div> </div> ); }; I'm stumped. What should I be looking to change?