Loading...
Loading...
Use when triggering animations on scroll - reveal effects, parallax, sticky headers, progress indicators, or any scroll-linked motion.
npx skill4agent add dylantarre/animation-principles scroll-animations| Scroll Animation | Duration | Trigger Point | Easing |
|---|---|---|---|
| Fade In | 500ms | 20% visible | ease-out |
| Slide Up | 600ms | 15% visible | ease-out |
| Parallax | real-time | continuous | linear |
| Sticky Header | 200ms | threshold | ease-out |
| Progress Bar | real-time | continuous | linear |
| Section Reveal | 600ms | 25% visible | ease-out |
/* Scroll-triggered reveal */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 500ms ease-out, transform 600ms ease-out;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* CSS-only parallax */
.parallax-container {
perspective: 1px;
overflow-y: auto;
}
.parallax-slow {
transform: translateZ(-1px) scale(2);
}const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
},
{ threshold: 0.2, rootMargin: '0px 0px -10% 0px' }
);
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));@keyframes reveal {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.scroll-reveal {
animation: reveal linear both;
animation-timeline: view();
animation-range: entry 0% entry 50%;
}prefers-reduced-motion