Animation to play once per session

Stack Overflow Asked by Alejandro Vargas on January 15, 2021

I’m currently working on an animation with gsap. I’m implementing it on my page but I only want it to play once per session. I was planning to use a cookie or session storage but haven’t worked with either yet on something like an animation. I’ve also scoured the web and found nothing related. How can I implement this into my javascript?

let clicker = document.getElementById('clicker');


var ballMotion = gsap.timeline();

ballMotion
.from(".logo", {duration: 3, bottom: '-170vh', ease: "power2.inOut"},)
.from(".ball", {duration: 3, bottom: '-167vh', ease: "power2.inOut", onComplete: function() {
  clicker.addEventListener("click", resumeTL);
}}, "-=3")
.to('.flex-button', {opacity:1},)
.to('.form-wrapper', {opacity:1},)

.addPause()

.to('.flex-button', {duration: 0.1, opacity:0, zIndex:-100},)
.to('.form-wrapper', {duration: 0.1, opacity:0, zIndex:-99},)
.to(".ball", {duration: 1, borderRadius: '50%', transform:'scale(100)', ease: "circ.inOut", onComplete: function(){
    let loadWrapper = document.querySelector('.load-wrapper');
    loadWrapper.classList.add('load-wrapper-finished');
}}, "+=0",);



function resumeTL() {
  clicker.removeEventListener("click", resumeTL);
  $(".logo").explode({"minWidth":3,"maxWidth":10,"radius":700,"minRadius":10,"release":true,"fadeTime":10,"recycle":false,"recycleDelay":500,"explodeTime":1000,"round":false,"minAngle":0,"maxAngle":360,"gravity":2,"groundDistance":1500});
  ballMotion.resume();
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="veiwport" content="width=device-width, initial-scale="1.0">
        <link rel="stylesheet" type="text/css" href="main/testball.css">
    </head>
    <body>
        <div class="load-wrapper">    
            <img src="https://i.pinimg.com/originals/99/03/03/9903039cbf847c29269ed538ef5ebb33.jpg" alt="logo" class="logo">
            <div class="ball">
            </div>
            <div class="flex-button">
                <button id="clicker">Enter</button>
            </div>
            <div class="form-wrapper">
                <form>
                        <input type="name" id="name" placeholder="Name..." name="name">
                        <input type="email" id="email" placeholder="Email..." name="email">
                        <button type="submit" id="submit-button">Submit</button>
                </form>
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>
        <script src="test/testball.js"></script>
        
        <script src="test/jquery.imgexplode.js"></script> 
    </body>
</html>

gsap javascript session session cookies

Add your own answers!

Ask a Question

Get help from others!