Heavy scroll animation has a reputation for making sites slow and unusable. Usually deserved, and entirely avoidable.
Animate the right properties
Transform and opacity are composited on the GPU. Animating width, top or margin forces layout on every frame, which is what produces jank.
Do not hijack touch scrolling
Native momentum on iOS and Android is better than anything you will implement. Smooth-scroll enhancement belongs on desktop only.
Never leave content hidden
If your reveal starts at opacity 0 and the script fails, the page is blank. Reveals should only be armed once the animation code has confirmed it is running.
Honour reduced motion
Respect prefers-reduced-motion, and resolve animations to their finished state rather than simply removing the transition.
- Motion
- Performance
- Accessibility