Question 165259 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can WordPress run an animation only the first time you visit a website?

I have a logo that popups on the homepage, after you clicked on it, you can go further on the website (I have got that working splendidly). But when visiting another page and going back to the index page, the animation starts over again.

Is there a way to lock this behind some WordPress-PHP-code or something else?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks for the answer. That was exactly what I was looking for. I've got an if else code together, but to animation has to play twice before it active the else part of the code. Any thoughts on that?

      const toggleTag = document.querySelector('.popup-logo')

const mainTag = document.querySelector('.popup-logo')
const logoTag = document.querySelector('.logo')
const titleTag = document.querySelector('a.title-container')
const mainpageTag = document.querySelector('body')

const karmelTag = document.querySelector("div.karmel")





// Popup logo sessionStorage

const element = document.querySelector('.popup-logo');


if(typeof(sessionStorage.getItem("popupLogoShown")) != null && sessionStorage.getItem("popupLogoShown") != "true"){

  console.log("sessionStorage active");
  element.classList.add("animationplay");
  sessionStorage.setItem("popupLogoShown","true");

  toggleTag.addEventListener('click', function() {
    mainTag.classList.toggle('hidden')
    logoTag.classList.remove('hidden')
    titleTag.classList.remove('hidden')
    mainpageTag.style.position = "absolute"
    karmelTag.style.marginLeft = "4%"
    karmelTag.style.transition = "all 1s"
  })


}else{
  console.log("sessionStorage already active.");
  element.classList.add("animationplayed");
  sessionStorage.setItem("popupLogoShown","true");

  mainTag.classList.toggle('hidden')
  mainpageTag.classList.toggle('popup-logo-beenshown')
  logoTag.classList.remove('hidden')
  titleTag.classList.remove('hidden')
  karmelTag.style.marginLeft = "4%"
  mainpageTag.style.position = "absolute"

};

    To see in action, here is the site: working example


  2. 0

    Best way to approach this would be on the client side (using JavaScript).
    Use either localStorage or sessionStorage (depending on the desired result*) to store a variable on the visitors browser. Use this variable to only show the animation once, when the variable is not yet set.

    See Code Examples Here:

    https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

    https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

    (*) The difference between localStorage and sessionStorage:
    With sessionStorage the data is saved only until the window or tab is closed, while with localStorage the data is persisted until the visitor manually clears his/hers browser cache or until your web app clears the data.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search