css-scroll-animations.md

CSS Scroll-Driven Animations (view-timeline, animation-timeline, view())

• Introducing "Unleash the power of Scroll-Driven Animations"
• CSS Scroll-triggered Animations with Style Queries
• Scroll-Driven Animations: You want overflow: clip, not overflow: hidden
• Demo: show off Scroll-driven Animations
• Demo: CSS-Only Sticky CTA
• Real World examples
• Spec: scroll-animations-1 examples
• First look into scroll-driven animations
• 30 CSS scroll driven animation examples

@keyframes slide-left {
    from { transform: scale(0.7); }
    to   { transform: scale(1); }
}
.scroll-animate-slide-left {
    transform-origin: top right;
    animation: slide-left ease-out both;
    animation-timeline: view(block -64px);
    animation-range: entry 0% entry 50%;
}

Examples

• Photo gallery with Scroll Driven Animation