Search the Community

Hey guys, this should be a breeze for you all, but my knowledge is limited: on screen resize, I want to kill all tweens (and timeline). I used killAll, which did it partially. The problem is whenever the screen is resized the animation stops midway, when I want is for it to be set to the initial position, as if the animation were never triggered. Thanks for your help! function animations(){ var rotationOne = new TimelineMax() rotationOne.to("#box3",1.5,{rotation:-3,transformOrigin:"100% 50%", ease:Power1.easeInOut}) .to("#box3",1.5,{rotation:3,transformOrigin:"100% 50%", ease:Power1.easeInOut,repeat:-1,yoyo:true}); var rotationTwo = new TimelineMax() rotationTwo.to("#box4",1.5,{rotation:-3,transformOrigin:"0% 50%", ease:Power1.easeInOut}) .to("#box4",1.5,{rotation:3,transformOrigin:"0% 50%", ease:Power1.easeInOut,repeat:-1,yoyo:true}); var rotationThree = new TimelineMax() rotationThree.to("#box2",1.5,{rotation:1,transformOrigin:"50% 100%", ease:Power1.easeInOut}) .to("#box2",1.5,{rotation:-1,transformOrigin:"50% 100%", ease:Power1.easeInOut,repeat:-1,yoyo:true}); var blink = new TimelineMax() blink.to(".jazz-blink",0.3,{opacity:0, ease:Power1.easeInOut}) .to(".jazz-blink",0.3,{opacity:1, ease:Power1.easeInOut, repeat:-1,yoyo:true}); var rotateX = new TimelineMax() rotateX.to(".band1",2,{rotationX:360, transformOrigin:"50% 50%", ease:Linear.easeNone, repeat:-1,yoyo:true}); var rotateXBack = new TimelineMax() rotateXBack.to(".band2",2,{rotationX:360, transformOrigin:"50% 50%", ease:Linear.easeNone, repeat:-1,yoyo:true}); var rotateY = new TimelineMax() rotateY.to(".spine",2,{rotationY:360, transformOrigin:"50% 50%", ease:Linear.easeNone, repeat:-1,yoyo:true}); TweenMax.set(".rectangle", { x:-803.4 }); var slideMain = new TimelineMax() slideMain.to(".rectangle",4,{x:0,transformOrigin:"0% 0%", ease:Linear.easeNone}) .to(".rectangle",4,{x:-803.4,transformOrigin:"0% 0%", ease:Linear.easeNone,repeat:-1,yoyo:true}); var slideSmall = new TimelineMax() slideSmall.to(".line",2,{x:-140.4,transformOrigin:"0% 100%", ease:Linear.easeNone}) .to(".line",2,{x:0,transformOrigin:"0% 100%", ease:Linear.easeNone,repeat:-1,yoyo:true}); } if ($(window).width() > 768) { animations(); } $(window).resize(function(){ if($(window).width() > 768){ animations(); } else { TweenMax.killAll(); } });