Jump to content
mabuse

Update height value dinamically on window resize

Recommended Posts

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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.