Jump to content
Search Community

Help to resolve stuttering of background position on ScrollTrigger on mobile

1stevengrant test
Moderator Tag

Recommended Posts

Would be happy to hire someone for a few hours to iron this out for me.


I'm trying to recreate background-attachment: fixed on mobile to create a kind of parallax effect on a section.


However, I'm finding that there's a stuttering on the Y-axis that I can't seem to get rid of. This is my first foray into animation and I'm assuming the stutter is related to the expense of recalculating and repainting the background position.


Here's a replication of what I'm doing.


See the Pen efb31fe9359334dd4fbdf4eec3ecafe2 by 1stevengrant (@1stevengrant) on CodePen


Any help is greatly received.

Link to comment
Share on other sites

Hopefully someone has reached out to you to help on a consulting basis, but I'd recommend trying to just animate a regular image with transforms rather than a backgroundImage because:

  1. If I recall correctly, many browsers will pixel-snap background image positions which can lead to it looking jittery.
  2. Regular transforms (like "x" and "y") are hardware-accelerated and accommodate sub-pixel rendering. They're faster and less jittery. 

Good luck with the project!

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