Stop the animation when a user goes back to the home from an internal page

[DanyDanno]

Hi Everybody,

 

I'm new here. First of all I'd like to congratulate with you all and with the developers of GSAP. 

I set up a timeline that runs on anytime the homepage loads. Do you know if there is a way to stop the animation when a user goes back to the home by clicking on the logo (from an internal page)?

I would like that the timeline starts only when the user lands from an external link o when he types the url in the browser.

 

Thanks to all in advance!

[elegantseagulls]

Hi @DanyDanno,

 

This partly depends on how your site is built, but, for this, I'd set up a variable/state let homeAnimationPlayed = false; and change it via gsap's onComplete (and also if the user clicks from a nav link) to homeAnimationPlayed = true;, and run the timeline based on that conditional.
 

if (homeAnimationPlayed === false) {
  tl.play();
}

 

[ZachSaucier]

Hey Dany and welcome.

 

Generally speaking sites use cookies to keep track of users navigating different pages on their site. That way you can look for the cookie and only play the animation if it's not there (or set to something in particular). You might have luck using document.referrer but it's not as reliable.