[Uncaught TypeError: Cannot read property 'easeInOut' of undefined]

Oh wow... That is great... 

 

Thank you so much for the support.

[Uncaught TypeError: Cannot read property 'easeInOut' of undefined]

Hey thanks for the replay.

 

I have sorted the above issue by reordering my scripts.

Im using pug, that's why the script tag looks like that.

I use ScrollMagic for scroll animation. If you dont support it what else can be used instead of it ?

 

Thanks 

[Uncaught TypeError: Cannot read property 'easeInOut' of undefined]

Getting this error "Uncaught TypeError: Cannot read property 'easeInOut' of undefined"

I have added all the necessary scripts as follows:

 

script(src='/node_modules/gsap/src/minified/TweenMax.min.js')
script(src='/node_modules/gsap-drawsvg/drawsvgmin.js')
script(src='/node_modules/scrollmagic/scrollmagic/minified/ScrollMagic.min.js')
script(src='/node_modules/scrollmagic/scrollmagic/minified/plugins/animation.gsap.min.js')
script(src='/node_modules/scrollmagic/scrollmagic/minified/plugins/debug.addIndicators.min.js')

 

and Initialization as follows:
 

// Scroll Magic
// init controller
let controller = new ScrollMagic.Controller();

// build tween
TweenLite.set('.st0',{visibility: 'visible'});
let tween = TweenMax.from('.st0', 4, {drawSVG:0, ease:Power1.easeInOut});

// build scene
var scene = new ScrollMagic.Scene({
  triggerElement: '.test',
  duration: 96,
  triggerHook: 0.75,
  })
  .setTween(tween)
  .setPin('.test', {pushFollowers: false})
  .addIndicators() // add indicators (requires plugin)
  .addTo(controller);

Could someone help on this please? 
Any help appreciated !

 

[Stop Greensock animation on second page refresh]

 

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 :

<script src=" https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

 

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();

});

}

[Stop Greensock animation on second page refresh]

Actually, I started learning Javascript a few months ago, maybe that's why I couldn't understand cookie and local storage terms. 

If you don't mind could you please help me to sort this using cookies and local storage?

 

Thanks

[Stop Greensock animation on second page refresh]

Thanks, Shaun,

Is there any other way to tackle this using frontend side ie, writing javascript?

 

 

[Stop Greensock animation on second page refresh]

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"});

}

});