kill() not working on window resize. Console says timeline not defined.

[lukasporter17]

function start(){

var sw = window.innerWidth / 2 - 50;
var tl = new TimelineMax({repeat: -1});
tl.set("#hand", {transformOrigin: "50% 50%"});
tl.to("#hand", {duration: 1, opacity: 1, delay: 0.1});
tl.to("#hand", {duration: 0.3, y:-20, ease: "bounce"}, "+=0.1");
tl.to("#hand", {duration: 0.3, y:20, ease: Power3.easeOut});
tl.to("#hand", {duration: 0.3, y:-20, ease: Power3.easeIn});
tl.to("#hand", {duration: 0.2, y: -36, x:-70, rotation: -30, ease: Power3.easeIn});
tl.to("#hand", {duration: 0.8, x: 200, opacity: 0, ease: Power3.easeIn});
tl.to("#mail", {duration: 0.6, x: sw, opacity: 1, ease: Power3.easeIn});
tl.to("#mail", {duration: 0.5, x: sw, opacity: 0, ease: Power3.easeOut}, "+=1");
tl.to("#eyebase", {duration: 0.05, opacity: 1, ease: Power3.easeIn});
tl.to("#theyes", {duration: 0.05, opacity: 1, ease: Power3.easeIn});
tl.to("#theyes", {duration: 0.5, x: -30, ease: Power3.easeIn});
tl.to("#theyes", {duration: 0.5, x: 5, ease: Power3.easeIn});
tl.to("#theyes", {duration: 0.2, x: -30, opacity: 0, ease: Power3.easeIn});
tl.to("#eyebase", {duration: 0.2, opacity: 1, opacity: 0, ease: Power3.easeIn});

}


start();

window.addEventListener("resize", function(){ tl.kill(); start(); } );

I need to update a variable (the sw variable) on window resize (as my animation gets
messed up on window resize).
So I plan to put my timeline in a function and kill the
timeline and start it again with event listener on resize.

But this is not working. Console says tl is not defined. Plz help.

[ZachSaucier]

Hey Lukas! Welcome to the GreenSock forums!

 

This is because of function scoping. To fix it, just move the tl declaration outside of the function:

var tl;
function start() {
  var sw = window.innerWidth / 2 - 50;
  tl = new TimelineMax({repeat: -1});
  ...
}

By the way, we highly recommend GSAP 3. It's a smaller file size, has more features, and an improved API!

[PointC]

Hi @lukasporter17 

 

Welcome to the forums.

 

It looks like you're part way to GSAP 3 with the duration inside the vars like that, but as @ZachSaucier mentioned, you should take a look at the GSAP 3 docs and make the complete switch. You could then use defaults on the timeline and save a lot of typing. 

 

For example, you have a Power3 ease repeated multiple times so you could do something like this with defaults.

let tl = gsap.timeline({ defaults: { ease: "power3.in" } });

Happy tweening.

 

[lukasporter17]

Even when I move the var tl; to  outside the function the : tl.kill();

 

I still get tl no defined in console.

 

updated code

Quote

var tl;
function start(){

var sw = window.innerWidth / 2 - 50;
var tl = gsap.timeline({repeat: -1});
tl.set("#hand", {transformOrigin: "50% 50%"});
tl.to("#hand", {duration: 1, opacity: 1, delay: 0.1});
tl.to("#hand", {duration: 0.3, y:-20, ease: "bounce"}, "+=0.1");
tl.to("#hand", {duration: 0.3, y:20, ease: Power3.easeOut});
tl.to("#hand", {duration: 0.3, y:-20, ease: Power3.easeIn});
tl.to("#hand", {duration: 0.2, y: -36, x:-70, rotation: -30, ease: Power3.easeIn});
tl.to("#hand", {duration: 0.8, x: 200, opacity: 0, ease: Power3.easeIn});
tl.to("#mail", {duration: 0.6, x: sw, opacity: 1, ease: Power3.easeIn});
tl.to("#mail", {duration: 0.5, x: sw, opacity: 0, ease: Power3.easeOut}, "+=1");
tl.to("#eyebase", {duration: 0.05, opacity: 1, ease: Power3.easeIn});
tl.to("#theyes", {duration: 0.05, opacity: 1, ease: Power3.easeIn});
tl.to("#theyes", {duration: 0.5, x: -30, ease: Power3.easeIn});
tl.to("#theyes", {duration: 0.5, x: 5, ease: Power3.easeIn});
tl.to("#theyes", {duration: 0.2, x: -30, opacity: 0, ease: Power3.easeIn});
tl.to("#eyebase", {duration: 0.2, opacity: 1, opacity: 0, ease: Power3.easeIn});

}

start();

window.addEventListener("resize", function(){  tl.kill(); } );

 

 

[ZachSaucier]

6 minutes ago, lukasporter17 said:

Even when I move the var tl; to  outside the function the : tl.kill();

 

I still get tl no defined in console.

Oops, my mistake. Remove the var in front of the var tl inside of the function. Typo  

 

Leaving it actually creates a second variable that's scoped to the function. I changed the code above to be correct.

[lukasporter17]

OK, that works, but when I add start(); after tl.kill() The animation acts weird.

 

I want the animation to totally stop and the var sw to update to the new window.innerWidth.

 

I need the var sw to update every time the window resizes because the #mail selector needs to tween to half the width of the window but it just does not behave. It seems sometimes as if the animation is playing twice, too.

[ZachSaucier]

30 minutes ago, lukasporter17 said:

The animation acts weird

"Weird" is subjective. I'm betting it's predictable  

 

It's not clear the exact effect that you're wanting. Without a demo it's still kind of abstract. You may be able to just do tl.pause(0).kill(); if the starting values are the ones you want to use. Most likely you need to clear the properties that are set instead:

tl.kill(); gsap.set("#hand, #eyebase, #theyes, #mail", {clearProps: true}); start();

Inside of the resize event listener obviously.

[lukasporter17]

8 minutes ago, ZachSaucier said:

"Weird" is subjective. I'm betting it's predictable  

 

It's not clear the exact effect that you're wanting. Without a demo it's still kind of abstract. You may be able to just do tl.pause(0).kill(); if the starting values are the ones you want to use. Most likely you need to clear the properties that are set instead:

tl.kill(); gsap.set("#hand, #eyebase, #theyes, #mail", {clearProps: true}); start();

Inside of the resize event listener obviously.

This fixed my issue. Thank you very much.