Stop animation from executing if coming from an internal link

Question

I'm using anime.js to provide an animation on my homepage. However I only want this animation to occur when a user comes from an external source (not from an internal link, such as the contact page of my website).

I've discovered this method:

window.onload = function () {
    if (!('hasCodeRunBefore' in localStorage)) {
    // code to run
    localStorage.set.single('has_code_run_before', true);
    }
}

However, I feel like this will only run the animation a single time EVER for that user (as long as the information remains cached).

Is there a way to make the animation work every time the user comes to my homepage (romanrogers.co), from an external source.

Thank you

https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer — SLaks, Dec 10 '18 at 17:36

score 1 · Accepted Answer · answered Dec 11 '18 at 10:33

1

With the help of SLaks, I solved this issue with the use of document.referrer and the includes method:

if(!(referrer.includes("websiteName"))){

  // execute animation
  
  }
else {

  // do not execute, make necessary style changes
  
  }

document.referrer returns a string with the URL of the document that loaded the current document. Therefore if we make the includes method search value equal to websiteName, we can manipulate what is executed when coming from a document internal to our site.

answered Dec 11 '18 at 10:33

rome

539
1
5
23

You really shouldn't have `.contact, .right, .word, .work { opacity: 0; }` as the default. – Dan D. Dec 11 '18 at 14:05
@DanD Do you mind explaining why? Should I be hiding it another way? – rome Dec 11 '18 at 14:34
1

In any browser with javascript disabled the contents of the page never become visible. – Dan D. Dec 11 '18 at 14:48

Stop animation from executing if coming from an internal link

1 Answers1