Hello, I am working with the Symmetry Theme and want to use a CSS animation. The animation works beautifully but plays each time the page loads. I would like to have this particular animation play only once per session for the user. I know this will require JavaScript, but I am unsure where to put my JS to track the number of times the animation has run. Below, I have posted the CSS used for the animation located in the ‘styles.css.liquid’ file.
@keyframes dropFromTop{
0% {
transform: translateY(-100%);
}
70% {
transform: translateY(102%);
}
100% {
transform:translateY(0);
}
}
.animate{
animation: 2s ease-out 0s 1 dropFromTop;
}
Any help would be much appreciated. Thank you.
Edit: Forgot to add the JS code I want to use:
// Get desired elements
var element = document.getElementsByClassName(‘logo’);
// Iterate through the retrieved elements and add the necessary class names.
for(var i = 0; i < element.length; i++)
{
if (window.sessionStorage.getItem(‘logoAnimated’) === null) {
element[i].classList.add(‘animate’);
window.sessionStorage.setItem(‘logoAnimated’, 1);
}
}