Scroll-Triggered Animation Easing

Scroll-Triggered Animation Easing

Scroll-triggered animations reveal content as the user scrolls. The easing needs to be subtle and quick — users are actively scrolling and shouldn't wait for animations to complete.

Recommended Curve

transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);

This smooth deceleration curve works exceptionally well for scroll reveals because it reaches near-full progress quickly (within the first 30% of the duration) and then eases very gently into the final state.

Why This Curve for Scroll?

During scrolling, content enters the viewport from below. Using a strong deceleration curve means the element "catches up" to its position quickly, preventing the awkward state where the user has scrolled past but the animation is still playing.

Common Scroll Reveal Patterns

/* Fade up */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

Staggered Scroll Reveals

When multiple elements enter together, stagger their delays:

.reveal:nth-child(1) { transition-delay: 0ms; }
.reveal:nth-child(2) { transition-delay: 80ms; }
.reveal:nth-child(3) { transition-delay: 160ms; }

Keep the stagger short (60-100ms per item) so the entire group finishes quickly. With the deceleration curve, each element lands smoothly without feeling like it's still catching up.

Performance Considerations

• Use transform and opacity only — they are composited by the GPU.
• Use IntersectionObserver instead of scroll event listeners.
• Add will-change: transform, opacity to elements that will animate.
• Keep durations under 800ms — slow scroll animations feel sluggish.

Avoid These Mistakes

Mistake	Problem
Using ease-in	Elements appear to accelerate into position, feeling like they're falling
Duration > 1s	Users scroll past before the animation finishes
Animating margin or padding	Triggers layout recalculation, causing jank