Jump to content

Kiefer Slaton

Proper way to update window.innerHeight/innerWidth references on resize

Recommended Posts

Hi all, 


I've spun up a codepen that represents an animation I'm doing on a much larger site. The map needs to zoom in such that the specific hexagon in the quartet on the map is superimposed under the lone hexagon on the page. I'm facing a unique challenge in that the hexagon's size is set in pixels and its position in vh/vw units, so I have to reference both when I'm doing the gsap transform. The problem I'm running into is that because the tl is initiated on page load, I'm losing the correct reference point if I resize the window. What's the correct way to update these references on resize? I believe the answer has something to do with the Modifiers Plugin, but I'm lost on how to actually execute it. Thanks so much for your help.

See the Pen OJWxOGO by kslaton (@kslaton) on CodePen

Link to comment
Share on other sites

If the window resizes, then you would need to kill your old animation and create a new one with the new window dimensions.


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.