GSAP/CSS プレミアムアニメーション実装。「アニメーション」「GSAP」「スクロール演出」で起動。
意味のあるマイクロインタラクションとスクロール連動アニメーションを実装する。
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
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); }
context7: GSAP / Framer Motion の最新API確認