120 lines
2.7 KiB
Markdown
120 lines
2.7 KiB
Markdown
---
|
||
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` |
|