Scroll-driven animation ties motion to the reader's own movement, which makes it feel responsive and controllable. It's also easy to overdo, turning a page into an obstacle course.
Use scroll for storytelling, not decoration
Pinning a section while content changes is great for explaining a sequence: a product assembling, a process step by step. Pinning a section just because you can makes people feel stuck.
Keep the reader in control
Tie animations to scroll position (scrubbing) rather than firing long timed sequences. If someone scrolls back, the animation should reverse, not replay from the start.
Performance rules
- Animate transform and opacity only.
- Use one scroll loop for everything; smooth-scroll libraries should drive your scroll animations, not compete with them.
- Test on a mid-range phone, not your desktop.
Always offer the calm version
When reduced motion is on, skip pinning and parallax and show the content plainly. If the page doesn't work that way, the animation was carrying meaning it shouldn't.