Jump to content
GreenSock

Caroline_Portugal

Kill tweens on resize and reset starting position

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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();
    }
});
Link to comment
Share on other sites

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!
 

  • Like 2
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • Solution

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.

:)

  • Like 3
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×