Kill tweens on resize and reset starting position

[Caroline_Portugal]

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

[Carl]

You can set animations back to their beginning using their progress() or pause() methods. 

So to set rotateY to the beginning you could do

slideSmall.pause(0);

Since you have so many different timelines you may want to put each one in an Array and then loop through that array to pause them all.

 

If you need more assistance or something different. Please provide a reduced CodePen demo so that we have some code to work with.

 

Thanks!
 

[Caroline_Portugal]

Hey Carl, thanks for your reply and here's a simplified CodePen version: 

 

See the Pen mAYakJ by carolineportugal (@carolineportugal) on CodePen

 

What I need is for: 

 

01. animation to load when landing on larger screen size (currently working);

02. animation to not be triggered when landing on smaller screen size (currently working); 

03. animation to stop and reset to "0" when resizing to a smaller screen size (currently not working);

04. animation to load again when resizing to a larger screen size (currently not working); 

 

 

Thanks again -- I've been having some difficulty understanding 'killing' and 'restarting' animations according to screen resize for some time now, so I appreciate any kind of help!

[PointC]

Hi Caroline_Portugal 

 

If I understand your question correctly, it looks like you don't need to recreate the animation on a resize event. It seems you want it to play or not depending on the screen size. If that's the case, you don't need to kill() the animation, but rather play() or pause() it depending on the screen size. You can put all your screen size logic into a function and call it when the page loads and call it again when the screen is resized.

 

Here's a fork of your pen with that solution.

 

See the Pen RGmdVx by PointC (@PointC) on CodePen

 

Hopefully that helps a bit.

 

Happy tweening.

[Caroline_Portugal]

Second time you nail the answer for me. Thanks so much, PointC!

[PointC]

Happy to help. That's how we roll in the GreenSock neighborhood.