Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Become Legendary

How to optimize “ScrollMagic+TweenMax+GSAP” performance?

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

At first sight an easy animation causes lags and is choppy on mobile devices.
In Chrome I can reproduce it by going to F12 > emulate mobile > iPhone 6/7/8.
And when the page is scrolled down it's possible to see that the animated text is kind of jiggling up and down, in other words, it's choppy.
GIF with visual representation


See the Pen pooRbrY by 1818 (@1818) on CodePen

Link to comment
Share on other sites

Hey Andrey and welcome to the GreenSock forums!


ScrollMagic isn't a GreenSock product and we don't support it here so you may not get a response from other forum members. Hopefully you will though!


Good luck with your project!

Link to comment
Share on other sites

@ZachSaucier Thanks, I hope I will! I've added the GIF for a better visual representation because you've said on SOF that you can't see any lags. I tried adding will-change: transform, opacity;  which does not seem to help and also tried using TweenMax.lagSmoothing() but I'm not sure if I did it correctly.

  • Like 1
Link to comment
Share on other sites

Opened up a small bounty on StackOverflow if anyone is interested. I will also post a solution to this problem on this forum if I ever find one.

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.