Can I use these animations in a React project?

Yes, this skill includes specific React hooks and integration patterns that safely use the ScrollTimeline and ViewTimeline APIs within a component lifecycle.

How does this improve web performance?

By using native CSS timelines, animations run on the browser's compositor thread, avoiding the main-thread jank usually caused by JavaScript scroll event listeners.

What are scroll-driven animations?

They are CSS-based animations linked directly to a scroll container's progress or an element's visibility in the viewport, operating without JavaScript for maximum performance.

Which browsers support this skill's patterns?

The patterns target modern browsers including Chrome 115+, Edge 115+, and Safari 18.4+, and include @supports fallbacks for Firefox and older versions.

What is the difference between scroll() and view()?

The scroll() function links animation to the scroll position of a container, while view() links it to the visibility of a specific element as it enters and exits the viewport.

Scroll-Driven CSS Animations

Name: Scroll-Driven CSS Animations
Author: yonatangross

byyonatangross

•

디자인 도구

Implements high-performance, declarative scroll-linked animations and parallax effects using modern CSS Scroll-Driven Animation APIs.

This skill enables Claude to implement smooth, browser-native scroll animations without the overhead of heavy JavaScript libraries. It leverages the modern Scroll-Driven Animations API—specifically ScrollTimeline and ViewTimeline—to create reading progress indicators, element reveal effects, and sophisticated parallax sections. Designed for modern frontend workflows, it includes standardized patterns for progressive enhancement, React integration, and performance optimization to ensure a fluid user experience across supported browsers like Chrome, Edge, and Safari while providing clean fallbacks for others.

주요 기능

01Sticky header and reading progress bar implementations

0269 GitHub stars

03Viewport-based ViewTimeline reveals and entrance effects

04Zero-JS parallax performance patterns for marketing UI

05Declarative Scroll-Linked Animations via scroll()

06Progressive enhancement with @supports and IntersectionObserver fallbacks

사용 사례

01Creating a reading progress bar that fills as the user scrolls down a long-form article.

02Implementing reveal-on-scroll animations for landing page feature cards to increase engagement.

03Adding performant parallax backgrounds to hero sections without introducing layout jank.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit scroll-driven-animations

For use in Claude.ai and ChatGPT

Download Skill