Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
emilychews

Pause Timeline on Window Resize Only Works Once

Recommended Posts

Hi,

 

I have a timeline (inside a function) that I want to pause when a window is above 737px (it's a simple animation to replace a video that is present on larger screens).  So I've set up a resize event, and as expected when the window loads at greater than 737px the timeline is paused and when I resize the window to < 737px, it does then play the animation. All good. 

 

However, when I either load the window below 737px (or resize the window more once when I've loaded the window initially at a window size greater than 737px) it doesn't pause?

I've recreated the problem with a rotating div in the attached Codepen.
 

Any help, ideas or suggestions very welcome.

 

Em.

 

var tl = new TimelineMax();

function animation() {
  if (window.innerWidth < 737) {
    
    tl.to ("#div", 3, {rotation: 360, repeat: -1, ease:Linear.easeNone});
    
  } else {
    
    tl.pause
    
  }
}

animation();
window.addEventListener("resize", animation, false)

 

See the Pen BPpPQy by emilychews (@emilychews) on CodePen

Link to comment
Share on other sites

Please try creating your timeline outside of the resize function and play/pause it depending on window size.

 

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

You also have a typo on line 10:

// bad
tl.pause

// good
tl.pause();

 

Happy tweening.

:)

 

  • Like 2
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.
×