How is this tweenmax scrolling animation done?

[jrobertblack]

So came across this site that uses tweenmax for most of its site... really nice animations.

But really interested how this page was built.

I have used tweenmax and scrollmagic for this type of animations but it doesnt come close to the level this,

mine seem jerky and not smooth, these are butter smooth and so nice.

 

https://lg2.com/en/outside

 

How is it attaching to the scroll or enter frame? How is the animation so clean?

 

seems the js is here - https://lg2.com/assets/js/main.min.js?v=1508352195

[Jonathan]

Hello @jrobertblack and Welcome to the GreenSock Forum!

 

Well there could be a number of things to make your animation more smooth. It really depends on what you are doing in your code. If you could please provide an example of what your trying to do we can better give you advice. It could be as simple as you trying to animate CSS position offsets like top, left, right, or bottom.. Instead of animating with transforms like translateX  or translateY. Animating position offsets will always give you jank (lost frames) since position offsets like left and top need to always trigger layout on every render tick which will give you shakey or jittery motion. So please provide an example of your code so via codepen so we can help you better.

 

 

Happy Tweening!