Using localstorage in a layout component

[burnt falcon]

I have an animation I want to run once upon page load. The current issue I am running into is that each new navigated page replays the animation. I was planning on using localstorage to check whether or not the animation has been played yet but was wondering if there was a more simple approach to this. Using localstorage would mean I would have to check whether or not the animation has been stored in the localstorage.

My simple animiation I want to be played once.

  .header-nav {
    animation: fadeUpAnimation 1s ease forwards;
  }

  @keyframes fadeUpAnimation {
    from {
      opacity: 0;
      transform: translateY(1rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

Using the css property: animation-iteration-count: 1 will not work. Thanks in advance!

[clever epoch]

Yeah, you could have an event listener for "load" and check localStorage for a flag, if the flag is not found, add the animation class to the element. However, that also mean they'll never see the animation again, in future visits. You might want to look at session storage instead.

[burnt falcon]

ah gotcha

thanks so much ill look into this!