mikizalo Posted February 25, 2021 Share Posted February 25, 2021 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 More sharing options...
tailbreezy Posted February 25, 2021 Share Posted February 25, 2021 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 }) 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 25, 2021 Share Posted February 25, 2021 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. 2 Link to comment Share on other sites More sharing options...
mikizalo Posted February 25, 2021 Author Share Posted February 25, 2021 Thank you very much ZachSaucier for quick and constructive response. Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 25, 2021 Share Posted February 25, 2021 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now