Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mikizalo

Unexpected behavior on resize when I use relative values

Recommended Posts

Hello,

 

I have I problem with animating logo in this example. Everything works normal until I change window size. Then logo jumps. I realized that it remembers the distance of 10vw in the corresponding value in pixels that it gets during the first time animation. For example, If I open menu first time and  window width was at first 1000px logo will move right from start position 10vw ie. 100px. And now if I close menu it will return at start position. If I now resize window to 800px logo will move right from start position 10vw ie. 80px. But if I close menu logo will first jump to 100px from start position  and than start animating to start position.

I have this problem all the time when I use relative values.

What is solution?

 

Thank you.

See the Pen XWNVxyv?editors=1111 by mikizalo (@mikizalo) on CodePen

Link to comment
Share on other sites

Hello,

 

If you have an issue when resizing, you should have code that handles resizing.

You should also manage your timelines and kill them off before resizing, to avoid pile up.

 

 

window.onresize = () => { your code }

window.addEventListener('resize', () => { your code })

 

 

  • Like 1
Link to comment
Share on other sites

A few notes:

  • You're making a couple of the most common GSAP mistakes: using the old syntax for your eases and not setting all of your transforms on elements being animated with GSAP.
  • You should avoid animating top/left/etc. properties that aren't performant to animate. Instead try to stick to performant properties like the transform properties. 
  • If you can, it's best to use a single timeline to control things because it handles conflict more easily. For example in your pen if you click the toggle button quickly in a row it glitches. You could fix that by creating a new relative animation but then the durations would be off in that case (which you could also fix by calculating the distance and using that as a factor of the duration but it's a lot easier to just use a single timeline if you can).
  • It's better to use innerText instead of innterHTML if you're just changing the text.
  • You could simplify a chunk of your code.

In terms of handling resize, you could kill off your timeline and recreate it as tailbreezy suggests. It's good to debounce the resize event so it doesn't happen too much. 

 

Here's how I'd approach it:

See the Pen bGBazVW?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Though not directly applicable, I think you'd benefit from my article about animating efficiently as well.

  • Like 2
Link to comment
Share on other sites

42 minutes ago, tailbreezy said:

window.onresize = () => { your code }

window.addEventListener('resize', () => { your code })

This would add two resize listeners FYI. I recommend just using the second line.

  • Like 2
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.
×