← Back to Motion & Animation

Create engaging scroll experiences that respond to user interaction. From parallax effects to scroll-triggered animations, these behaviors add depth and interactivity.

Scroll Position

0px

Page Progress

0%

Viewport Height

0px

Parallax Effect

Background moves slower than foreground

Scroll Animation

Elements animate on scroll

Parallax Scrolling

Elements move at different speeds to create depth

Best for: Hero sections, storytelling, visual depth

Scroll-Triggered Animation

Animations activate when elements enter viewport

Best for: Content reveals, feature highlights, storytelling

Scroll Progress Bar

Visual indicator of scroll position

Best for: Reading progress, long articles, documentation

Sticky Elements

Elements that stick during scroll

Best for: Navigation bars, sidebars, floating elements

Smooth Scrolling

Enhanced scrolling behavior and anchor links

Best for: Anchor navigation, single-page sites, user experience

Scroll Snap

Snap to specific points during scroll

Best for: Full-screen sections, carousels, mobile interfaces

Optimization Techniques

  • • Use transform3d() for GPU acceleration
  • • Throttle scroll event handlers with requestAnimationFrame
  • • Use Intersection Observer instead of scroll events when possible
  • • Implement lazy loading for off-screen animations
  • • Avoid animating layout-triggering properties
  • • Use will-change sparingly and remove after animation

Common Performance Issues

  • • ❌ Animating width/height instead of scale
  • • ❌ Not throttling scroll event handlers
  • • ❌ Too many elements with scroll animations
  • • ❌ Complex calculations in scroll handlers
  • • ❌ Not considering mobile performance
  • • ❌ Ignoring reduced motion preferences

Motion Sensitivity

@media (prefers-reduced-motion: reduce) { .parallax-element { transform: none; } }
  • • Respect user preferences
  • • Provide static alternatives
  • • Reduce animation intensity

Keyboard Navigation

  • • Ensure skip links work properly
  • • Maintain focus visibility during scroll
  • • Support keyboard shortcuts for navigation
  • • Test with screen readers

User Control

  • • Provide pause/play controls
  • • Allow disabling animations
  • • Show progress indicators
  • • Offer alternative navigation

GSAP ScrollTrigger

Professional scroll animations with powerful controls

npm install gsap

AOS (Animate On Scroll)

Simple scroll animations with CSS classes

npm install aos

Framer Motion

React animations with scroll triggers

npm install framer-motion

Lenis Smooth Scroll

Smooth scrolling library with easing

npm install @studio-freight/lenis

Locomotive Scroll

Smooth scroll with parallax effects

npm install locomotive-scroll

Intersection Observer

Native browser API for viewport detection

Built into modern browsers