Jump to content

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

Need to verify the correct method to take on a re-render of an animation due to a window resize event?

Recommended Posts

I have an animation I am working on that is a master timeline with some nested timelines appended inside. My question is the following: When a window resize event occurs, my animation is off b/c it is using the initial window width and height parameters used in calculating things responsively. When the window.resize event is triggered, how could I dynamically resize the animation without messing up its sequence? I have read a little about the invalidate method but still unsure if this is going to be the right way to go for me. Thanks. 

Link to comment
Share on other sites

There is no correct method, and it really depends on what you are trying to do. Invalidate works fine, but sometimes it's just easier to clear everything and start over. If you clear everything, save the progress of the animation before you rebuild it so you can revert back to where the animation was before you cleared it. Search around the forum. I know Diaco has answered many questions (with examples) about invalidating an animation.

var lastProgress = tl.progress();

// Rebuild timeline

  • Like 5
Link to comment
Share on other sites

I just helped someone do something similar, but it uses media queries instead of a window resize event. I did not use invalidate because it just seemed easier to use 1 function and the same logic every time to create the timeline.


Here's the discussion



And the demo

See the Pen a0df494306d49426e4e01f8a8fca1c34 by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

Hi Blake, thanks for your prompt response. I was toying around with this some more and realized that a simple resize of the banner container height after changing the window width (containes my greensock stuff) was the trick. Once it resized, my animations followed without any need for saving the progress. It was seemless.

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.