wow-design-wiki/motion/page-transitions.md

name, title, description, tags, source

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

Page Transitions & Scroll Animations

Что это

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

1. Section Reveal on Scroll

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));

.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

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));

.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)

.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

.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