Forum Discussion

Kamil_Nowek_11's avatar
Kamil_Nowek_11
Community Member
6 months ago

GSAP and changing the window size

Hi Guys. I'm using a GSAP library to scale object or move it to a given position. Everything looks great but when I'm resizing the window size, objects which are being changed using GSAP, looks like broken, I mean they have strange positions and scale, very different as expected and before window resizing. How should I repair it? Should I know the value of how window has been changed and on window resize event, try to use that value and rescale objects again? 

  • Math Notermans has made several posts about GSAP in the past, many of which talk about positioning and resizing. Try reading some his posts for ideas. Long story short, yes you need to use a resize event handler to update your GSAP animations whenever the document changes size. While you can attach an event to the window, that does not handle size changes caused by the side menu. You should attach it to the main slide or possibly an object on your slide (like a rectangle that covers the slide background, behind everything else). 

    The resize event handler will either restart your animation or redraw your objects into the correct current locations (or sizes, rotations, colors, etc.) whenever the display size changes. Depending upon you setup, you may need to know what state things are suppose to be in to correct them.

    I will post an example soonish that includes a resize event handler in the post linked below. You can examine it to see how it works.

    https://community.articulate.com/discussions/articulate-storyline/a-moving-carousel-menu-how-would-you-do-it