CODEWITHSUNDEEP
javascriptcssanimation
olivier
olivier

Reputation: 2645

Better performance for left transition animation with CSS

This is what I have:

.s2 {
  top: 150px;
  left: 20px;
  position: absolute;
  transition: left 300ms linear;
}

I change the left position dynamically on scroll with JavaScript. At the moment the performance is bad on mobile and even in a desktop browser.

How can I improve this? Is there a better approach for this?

Upvotes: 1

Views: 101

Answers (1)

ibrahim tanyalcin
ibrahim tanyalcin

Reputation: 6491

  • Consider throttling the scroll using requestAnimationFrame

  • use properties such as translate if you can instead of left or top

  • Ad translateZ(0) or translate3d(0,0,0) to trigger GPU on mobile (not always guaranteed)

Also since you are animating during scroll, you do not need to use the transition property, unless you have breakpoints/thresholds where you set the property once scroll amount exceeds a certain value.

Upvotes: 1

Related Questions