Animation not updating on resize

[romain.gr]

Hi, 

 

var openNavigation = new TimelineMax({ paused: true, onComplete: function(){closeNavigation.restart().pause()} });

openNavigation  .set($navigation, {display: 'block'})
  .fromTo($navigation, .5, {opacity: 0, width: 0},{opacity: 1, width: $(window).width() - 20, ease: Power4.easeInOut})
  .fromTo($navigation, 1, {height: 2},{height: $(window).height() - 20, ease: Power4.easeInOut}, '-=.2')
  .set($navigation, {width: '', height: ''});

 

I'm trying to animate a navigation from width: 0 to width: $(window).width() - 20, it's working fine until I resize the window.

 

When I resize the window, it keeps the first size of the width in memory, although the $(window).width() - 20 should always be different. 

 

How could this be achieve?

 

So to reproduce the issue : 

 

1. Open the nav by clicking on the Menu button (the nav width/height expand to take full window width/height less 20px ).

2. Closing the nav by clicking on the white button in the top right corner (the nav fadeout)

3. Resize the window

4. Re-open the nav (the nav width/height expand to the previous dimension)

 

Is there a way to update (pass new window width as argument?) those value each time the animation is run?

 

Thank you.

 

 

 

See the Pen ZmreEd by romaingranai (@romaingranai) on CodePen

[Sahil]

I have linked some threads below but looking at your animation I don't think you need to do that. Just hide the content of your container and scale it instead of changing height/width. Once animation is done make your content visible. If scaling doesn't work for you then you will need to write responsive tweens, check following threads.

 

You need to re-create tween/timeline to adapt to new values. There are few methods to do that like reconstructing timelines, using modifiersPlugin and using invalidate().

 

https://greensock.com/docs/TweenLite/invalidate()

 

In your case if you want to use invalidate you will need to use fromTo tweens for tweens that you want to update.

 

 

Another thread discussing same ideas,