Jump to content
Search Community

Stop Greensock animation on second page refresh

Pradeep KS test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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"});
}
});
Link to comment
Share on other sites

Hi @Pradeep KS,

 

You'll need to set a hook somewhere on the client side to check against. There are a few ways to do that. If you are using server side code for anything, you could set a session variable on the first load, and then use the presence of that session variable to set a hook on the client side, for example ...

 

<?
  $class = '';
  if( $_SESSION['subsequent_visit']  ){
    $class = ' subsequent-visit';
  }
?>
<body class="some-class another-class <? print $class;?>">

 

Which you can then check for before you create the timeline. Example

 

if( document.querySelector('body.subsequent-visit').length < 1 ){
  
  const tl = new timelineMax();
  
  ...
}

 

 

Or, on the client side alone, you could set a cookie to check against, or a variable in local storage to check against. Hope this helps,

 

Shaun

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

 

Hey,
Thank you so much for the hint. I spent a lot of time to fix this issue. After listening to you hint , did some research and finally I got the solution as follows:         

Included this :

 

if (Cookies.get('noPreloader') === 'true') {
$('.overlay').hide();
$('.overlay2').hide();
}
else {
$(window).on('load', function() {
Cookies.set('noPreloader', 'true', {expires: 1}); // 1 day cookie
// Animate loader off screen
$(".overlay").show().delay(4000).fadeOut();
$(".overlay2").show().delay(4000).fadeOut();
});
}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...