Design Animation Craft

const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) e.target.classList.add('is-visible');
  });
}, { threshold: 0.1 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

スタガードアニメーション

.stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; }
.stagger.is-visible > * { opacity: 1; transform: translateY(0); }

MCP活用

• context7: GSAP / Framer Motion の最新API確認

Do Not

• width/height/top/left でアニメーション（GPU非対応）
• prefers-reduced-motion 未対応