An animation that triggers or progresses based on the user's scroll position on a page, used to reveal content, create parallax depth effects, or narratively unfold information as the user reads. When well-implemented, scroll animation enhances storytelling and spatial orientation; when overused or poorly timed, it degrades performance and causes users to struggle to reach content.
Common contexts
- Building a product landing page where feature illustrations animate in as the user scrolls through each section
- Adding scroll-triggered progress indicators to a long-form article to help users orient themselves in the content
- Reviewing a portfolio site where heavy parallax effects reduce performance scores and cause motion sickness for vestibular-sensitive users
Use when
Use scroll animation on marketing and storytelling pages where pacing and narrative flow are intentional design goals — particularly when the animation reveals information in the sequence the user needs to understand it.
Avoid when
Avoid scroll animation in task-oriented product interfaces where users are trying to move efficiently to a goal — triggering animations on scroll creates a mismatch between the user's intent to navigate and the page's intent to present.
The moment a scroll animation makes someone feel clever for building it rather than useful for the person scrolling, it's already crossed the line from enhancement to obstacle.
Real-world examples
- Apple's iPhone product pages use scroll-driven 3D animations to rotate and zoom the device as users scroll, a technique that drove a measurable increase in time-on-page and a significant lift in pre-order click-through.
- Stripe's homepage uses scroll-triggered gradient animations that shift colour as users read, creating a sense of depth and motion that multiple case studies cite as a conversion driver for developer-audience landing pages.
- Airbnb's 2022 'Categories' launch page used parallax scroll animations to introduce each new category type, with engagement metrics showing users who experienced the animated version browsed 2× more categories than the static control.