Jump to content


Window Re-size

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

I was wondering about the best way to handle a jQuery resize event when a user resizes the browser window.  I am using TimelineMax and currently I am pausing the timeline, moving it to the very start of the timeline and then removing the timeline object, initializing a new one and rebuilding the timeline each time the browser resize event is fired.  I was thinking there might be a better way to do this.  I found this answer on StackOverflow here.

Having said that, this solution works, but it moves the timeline to the start every time.  If I try and resize the window and pause the timeline at the current time of the label it gets thrown off?  If I simply try and remove the timeline and rebuild it with a new object, it gets thrown off also?

I had seen something about a liquid stage?  Is this available on the JS version, or maybe there is something I am overlooking?


Here's my resize code:



$window.on('resize', function(){	
    var time = 0;
    if(globalLabel != "")
         time = controller.tl.getLabelTime(globalLabel);
    //time would be used to pause the timeline but it does not work
    //on the Update view call, I am creating a new timeline object 
    //and rebuilding the timeline
    id = setTimeout(controller.UpdateView, 150);



I appreciate any help.


Link to comment
Share on other sites

I'm having a hard time visualizing what you're attempting (and why). Could you create a super simple codepen or jsfiddle that demonstrates the problem so that we could see it in action? 


FYI, the remove() method is being used improperly in your code - that is for removing a particular tween/timeline instance, like myTimeline.remove(myTween). It doesn't do anything to just use remove() and pass it nothing. If you want to clear all the children out of the timeline, you can use myTimeline.clear(). 


But again, I suspect you're attempting something that could be much easier a different way, but I can't say for sure until I grasp exactly what your goal is (and what's breaking).

Link to comment
Share on other sites

Thank you very much for the help.  It came down to it that I was, as you pointed out, using the remove() function incorrectly.  I appreciate the help.

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.