Update height value dinamically on window resize

[mabuse]

Hi!

 

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?

 

Cheers

 

 

 

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

[Carl]

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.

[celli]

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.