Pause Timeline on Window Resize Only Works Once

[emilychews]

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

[PointC]

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.