Build Silky Smooth Animations

May 11, 2017 0 Comments by

Event listeners will fire many times, which could cause your application to exhibit jank. Here are some ideas on binding to the scroll event and doing something interesting, like flipping through photos, implementing a sticky navigation, or a custom parallax experience.

Poor Man's Way

Bind Scroll Event

Our method will handle the scroll event, bound to the window.

window.addEventListener('scrollAction', scroll)

scrollAction =>  
  // handler 

Throttle Requests

Our event will fire many times, but we really only need 60fps, so we can throttle our handler.

scrollAction =>  
  event.throttle()

Animating When a Frame is Available

Throttling our event is better than nothing, but there are times when we need to have more control over when the animation enters the next frame. If the window is in the background, or the application is busy, we can have the scroll happen when the frame is available.

requestAnimationFrame  

Optimal way

  • Don’t use scroll events or background-position to create parallax animations
  • Use CSS 3D transforms to create a more accurate parallax effect.

Resources


Tag cloud