Hello team,
I have added my animation code below.
This code is running fine. But my client doesn't want to run this on each page refresh. ie, This animation has to play only when the user visits the first time.
Now what is happening is when the user opens the site, the animation loads, then the user goes to any other internal pages, and later when he comes back to the index page, this animation will start loads again.
I want to run my green sock animation only when the page load first time, When i refresh the page second time, this animation should not run.
Thanks and regards,
Pradeep KS
const tl = new TimelineMax();
tl.to(".overlay", 2,{
y: -1000,
opacity: 0,
ease: Power4.easeIn,
delay: 0.5,
})
.from(".logo-icon", 0.8,{
y: 200,
opacity : 0,
scale: 1.2,
ease: Power2.easeOut,
delay: 0.2
})
.from(".logo-icon", 0.8,{
rotation: 360,
ease: Power2.easeOut,
delay: 0.2
})
.from(".logo-text", 0.5,{
y: 200,
opacity : 1,
ease: Power2.easeOut,
delay: 0.2
})
.to(".logo-icon", 0.5,{
y: -200,
opacity : 0,
ease: Expo.easeIn,
delay: 0.2
})
.to(".logo-text", 0.5,{
y: 200,
opacity : 0,
ease: Power2.easeInOut,
delay: 0.2
})
.to(".overlay2", 0.8,{
y: -1000,
opacity: 0,
ease: Power2.easeInOut,
delay: 0.2,
onComplete: function(){
TweenMax.set("body", {overflow:"visible"});
}
});