Toutes les notes

Les animations au scroll, désormais partout

1 min de lecture

For years, scroll-linked effects meant a scroll listener and a lot of getBoundingClientRect(). With Chrome 115+, Safari 26 and Firefox shipping scroll-driven animations, most of that code can go.

Two timelines

  • scroll() follows a scroll container from top to bottom — perfect for a reading-progress line.
  • view() follows one element as it crosses the viewport — perfect for reveals.
@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
}

Animate the cheap properties

Stick to opacity, transform, filter and clip-path. Anything that changes layout while scrolling will cost you frames on a mid-range phone.

Respect the visitor

Wrap all of it in @media (prefers-reduced-motion: no-preference). With reduced motion, content should simply be there — no blur, no movement, at most a short crossfade.

Keep JavaScript for choreography

Pinned scenes with several coordinated parts are still easier with GSAP ScrollTrigger. Use both: CSS for the many small things, GSAP for the few big ones.