Jump to content


Animation not updating on resize

Moderator Tag

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



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

Link to comment
Share on other sites

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().




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,




  • Like 5
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.