lukasporter17

This fixed my issue. Thank you very much.

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.

Even when I move the var tl; to outside the function the : tl.kill(); I still get tl no defined in console. updated code

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.