Jump to content


Update height value dinamically on window resize

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'm developing my first GSAP project and I have an issue updating 'Height' value (variable) when user resizes browser. The tween is part of an Scrollmagic scene and height must be updated to viewport height dinamically.


Basically is an image within a div container which is pinned to the top of the viewport and is downsized as user scrolls down. The issue is the initial height value of the div. Now I'm using '100vh' (line 17 of JS in Codepen) and it works fine but I know vh measures gives problems on some browsers.


I've tried some of the solutions listed on the forum topics but none worked. Is there any way to dinamically update height value as user resizes browser?






See the Pen GZRpVr by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi and welcome to the forums,


Thanks for creating the demo.


I'm struggling to understand what is expected to happen and what needs fixing. I'm not sure if the issue relates to:


  • using the right equation or properties to adjust height
  • configuring ScrollMagic correctly (ScrollMagic support would be best for that)
  • updating values in a tween

My first suggestion would be to use a percentage-based height, height:100% and see if you can get that to work.

Also there was a bug fixed regarding vh vw units in TweenMax 1.18.2 so perhaps try updating and see if it helps.


I think if you can remove ScrollMagic from the equation so we can focus solely on what GSAP needs to do it would help quite a bit.

  • Like 1
Link to comment
Share on other sites

I put this little codePen together, maybe this helps. It uses the vh of the image so the image height is always in the viewport, even on resize.

See the Pen XdWaRv by celli (@celli) on CodePen

 I also added something that would center it, so the width will crop on the left and right equally. maybe this helps.

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.