Jump to content


Smooth scroll for large image(i tried the tricks)

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

Hey guys,


I was wondering what is the best way to get most performance for side scrolling a good sized image. Ive tried the rotation-z and z micro degree with no success. As well as trying both x and left. and force 3d. It is extremely jittery when using gsap. The best performance I can get is with a pure css anmiation:


@-webkit-keyframes bg-slide {
    from { transform: translateX(0); }
    to { transform: translateX(-1198px); }


I have a 300x600 div with overflow hidden and a 1300x300px image I want to tween to the left within that 300x600 container.


Let me know if you have any suggestions.




See the Pen XGyPPZ by anon (@anon) on CodePen




See the Pen ywQxqb by anon (@anon) on CodePen




See the Pen ywQxqb by anon (@anon) on CodePen

Edited by ActionDev
added code pens
Link to comment
Share on other sites

Thanks for the demos. Its generally better to animate the x transform instead of left. 


Does this work better for you?


See the Pen drQgPB?editors=0110 by GreenSock (@GreenSock) on CodePen


  • Like 2
Link to comment
Share on other sites

@Carl beat me to it, but I just did the same thing and using x results in a buttery smooth animation for me.


I'd also recommend using the latest GSAP version (2.1.2).


Happy tweening.


  • Like 1
Link to comment
Share on other sites

Thanks for input, I originally tried with x and then moved to left for covering all options.


I also just updated to latest lib without any performance notice though thanks for catching that.


Do you think the only way to fix this would be to do this on canvas?



Link to comment
Share on other sites

I'm curious why you're seeing jank when none of us are seeing it, but I'd definitely recommend using transforms (x) because you'll get sub-pixel rendering and better performance. Animating left forces it to snap to whole pixels (that's a browser thing, not GSAP). Here are a few other things to try:

  • Just set() the rotation and/or z initially - there's no reason to tween those over 14 seconds. Waste of CPU cycles (though honestly I can't imagine that anyone would actually notice a performance difference)
  • I wonder if you're on a Mac and you're looking at Chrome because that browser has a but that affects 3D transforms, so you could just set CSSPlugin.defaultForce3D = false to see if that helps at all. I kinda doubt it will, but it's worth a shot. 

What browser and platform are you looking at this in? 

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