Smooth Scaling Issue with Sticky Logo Animation on Scroll

[nessus]

Hello there,

I’m encountering an issue with the GSAP animation I’ve implemented, which you can review in the CodePen link. Overall, the animation works fine, but there is one problem:
 

The logo follows us as we scroll downward (it's sticky) and shrinks to a certain point. During the shrinking (or enlarging when scrolling back up), the motion isn’t smooth. It produces small “jumps,” making the scaling appear uneven instead of fluid.

This issue becomes even more noticeable when reducing the viewport width. Essentially, it looks as if the logo’s width decreases in steps (e.g., 200px → 198px → 196px → 194px, etc.) rather than in smaller increments that would make the scaling truly smooth.
 

I’d greatly appreciate any suggestions on how to resolve this so that the resizing feels smooth and continuous. Additionally, any recommendations for improving or optimizing the JavaScript code used here would also be very welcome, so we can achieve the best possible overall result.

Thanks

See the Pen jEbgqzL by nessus_ (@nessus_) on CodePen.

[mvaneijgen]

There are certain properties you're better of not animating where width, height (top, left, right, bottom and a few others), these can cause browser repaints and are best to avoid at all cost. Better properties to animate are all the transform properties, so also here instead of animating the width animate the scale of the element, perfectly smooth and high in performance. 

 

Also take a look at https://gsap.com/resources/mistakes no need for .fromTo() tweens if you want to animate between browser defaults or values you've already set with CSS

 

Hope it helps and happy tweening! 

 

 

See the Pen WbQVxQM?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[nessus]

Thank you so much for your help and for the guidance. Your comments were extremely helpful, and I believe the animation is now exactly how I wanted it. You can also check it yourself on CodePen.

 

Thanks again, I really appreciate it! 🍻