Initial commit: 79+ design patterns, LLM prompts, and assets

motion/page-transitions.md

@@ -0,0 +1,119 @@
+---
+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` |