Jump to content
Search Community

Smooth scroll for large image(i tried the tricks)

ActionDev test
Moderator Tag

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.

 

CODEPEN:::::

CSS ANIMATION -- 

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

 

GSAP ANIMATION--

 

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

 

Thanks

 

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

Edited by ActionDev
added code pens
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.
×
×
  • Create New...