---
name: motion/page-transitions
title: Page Transitions & Scroll Animations
description: Smooth page transitions, section reveals, and scroll-triggered animations.
tags: [motion, page-transition, scroll, reveal, animation]
source: linear.app, raycast.com, brad.co, amppz.com
---

# Page Transitions & Scroll Animations

## Что это
Анимации при переходе между страницами и появление секций при скролле.

## 1. Section Reveal on Scroll

```javascript
const sections = document.querySelectorAll('.reveal-section');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('revealed');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.1, rootMargin: '0px 0px -10% 0px' });

sections.forEach(section => observer.observe(section));
```

```css
.reveal-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-section.revealed {
  opacity: 1;
  transform: translateY(0);
}
```

## 2. Staggered Children Reveal

```javascript
const sections = document.querySelectorAll('.stagger-section');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.querySelectorAll('.stagger-child').forEach((child, i) => {
        setTimeout(() => {
          child.classList.add('revealed');
        }, i * 100);
      });
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.1 });

sections.forEach(section => observer.observe(section));
```

```css
.stagger-child {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}
.stagger-child.revealed {
  opacity: 1;
  transform: translateY(0);
}
```

## 3. Page Transition (SPA style)

```css
.page {
  position: fixed;
  inset: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: all 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
.page.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: all;
  z-index: 1;
}
.page.exit {
  opacity: 0;
  transform: scale(0.95);
}
```

## 4. Smooth Scroll Snap

```css
.snap-scroll {
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  height: 100vh;
}
.snap-section {
  scroll-snap-align: start;
  min-height: 100vh;
}
```

## Anti-patterns

| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| `transition: 0.1s` — слишком быстро | `transition: 0.6–1s` |
| Без `IntersectionObserver` | Использовать observer |
| Без `prefers-reduced-motion` | Уважать настройки |
| Без `will-change` | `will-change: transform, opacity` |