Jump to content

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

Pause Timeline on Window Resize Only Works Once

Recommended Posts



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.




var tl = new TimelineMax();

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

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

// good


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.