Jump to content


How is this tweenmax scrolling animation done?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.




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

Link to comment
Share on other sites

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! :)

  • 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.