How to keep the state of an animation until a session if ended with sessionStorage?

Question

let me explain what i want to achieve.

I would like to show an animation only once during the session of an user. The animation can start only if the person quit is browser and comeback the the website.

If the person refresh or open the url in another tab the animation dosen't start again.

So, the animation is pretty simple, I have a two container taking the full height of the viewport.

The first one fade-out after 2s and let the place for the second container.

The goal is to keep that final state for the entire visit of an user.

The reason is to not show the animation multiple time so the experience will not become annoying.

Here the html and css

body {
  margin: 0;
  padding: 0;
}
.container {
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #fff;
}

.first-container {
  background-color: #21bab3;
  animation: fade-out 2s ease-in forwards;
  animation-delay: 1s;
}

.second-container {
  background-color: tomato;
}

h1 {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 10vw;
  text-transform: uppercase;
}

/*ANIAMTION*/

@keyframes fade-out {
  from {
    opacity: 1;
    height: 100vh;
  }
  to {
    opacity: 0;
    height: 0vh;
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  </head>
  <body>
    <div class="container first-container"><h1>first</h1></div>
    <div class="container second-container"><h1>second</h1></div>
    <script src="main.js"></script>
  </body>
</html>

I try to look how to maybe set the animation in a sessionStorage, but i didn't find answer.

I would like to achieve it without external library.

Thanks in advance

****EDIT*****

after a hint I try something with session storage but cant seem to exactly know what to do.

Im checking if a session key exist, if its null Im adding a class to the container I want to animate and setting a value the the session key.

After i check if the session key is true and if is true i remove the class that animated the container.

but now nothing happen

var firstContainer = document.querySelector(".first-container");
var secondContainer = document.querySelector(".second-container");

if (localStorage.getItem("animationPlayedOnce") === null) {
  firstContainer.classList.add("animated");
  sessionStorage.setItem("animationPlayedOnce", "true");
}

if (sessionStorage.getItem("animationPlayedOnce", "true")) {
  firstContainer.classList.remove("animated");
}

body {
  margin: 0;
  padding: 0;
}
.container {
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #fff;
}

.first-container {
  background-color: #21bab3;
}

.animated {
  animation: fade-out 2s ease-in forwards;
  animation-delay: 1s;
}

.second-container {
  background-color: tomato;
}

h1 {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 10vw;
  text-transform: uppercase;
}

/*ANIAMTION*/

@keyframes fade-out {
  from {
    opacity: 1;
    height: 100vh;
  }
  to {
    opacity: 0;
    height: 0vh;
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  </head>
  <body>
    <div id="animated" class="container first-container animated">
      <h1>first</h1>
    </div>
    <div class="container second-container"><h1>second</h1></div>
    <script src="main.js"></script>
  </body>
</html>

`localStorage` ? https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage or for on with an expiration (as your Q sugggests) `sessionStorage`.. https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage — Pogrindis, Jan 22 '19 at 20:09
Im checking if a session key exist, if its null Im adding a class to the container I want to animate and setting a value the the session key. After i check if the session key is true and if is true i remove the class that animated the container. but now nothing happen — Max, Jan 22 '19 at 20:56
sorry about the late answer, I was expecting someone else to get to this. I have added below one for you. — Pogrindis, Jan 23 '19 at 12:49

Pogrindis · Accepted Answer · 2019-01-23T12:47:38.600

You're correct in that you need javascript, and you almost have a good solution, just one thing to change..

for your scenerion of "Played already" :

if (sessionStorage.getItem("animationPlayedOnce", "true")) {
  firstContainer.classList.remove("animated");
}

What you are doing is removing the CSS class which is usually doing the transition after 1 second..

You should keep this (so as to prevent another scroll) but extend the initial position to be where the animated would bring the user, without animating. Something like :

CSS :

.post_animated{
    opacity: 0;
    height: 0vh;
    animation: none!important; // don't animate
}

Then in your Javascript, after you remove animation, apply the result of what animation would do with the above css class :

JS :

if (sessionStorage.getItem("animationPlayedOnce", "true")) {
      firstContainer.classList.remove("animated");
      // Add
      firstContainer.classList.add("post_animated");
    }

This will extend your method to remove the transition and just apply the css that you want.

Tested here in a JSFiddle. (Press Run Twice to see)

Note : localStorage was used for the jsFiddle but the same will apply for sessionStorage.

How to keep the state of an animation until a session if ended with sessionStorage?

1 Answers1