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

[jstafford]

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. 

[OSUblake]

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

tl.progress(lastProgress);
  

[OSUblake]

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

http://greensock.com/forums/topic/13126-problem-with-clearprops/

 

And the demo

See the Pen ?editors=001 by osublake (@osublake) on CodePen

[jstafford]

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.