[Component/CSS] Zero-JS Scroll-Driven Animations using native CSS `@scroll-timeline`

[Viidhii19]

Problem / Motivation

EaseMotion currently utilizes a JavaScript file (reveal.js using IntersectionObserver) to achieve scroll-triggered .ease-reveal animations. While functional, relying on JavaScript for styling violates the "Zero Dependency" philosophy of the framework. Modern evergreen browsers now support the CSS animation-timeline API, allowing scroll animations directly in the stylesheet.

Proposed Solution

Create a forward-looking proof-of-concept (PoC) that implements native, JavaScript-free scroll-reveals using the @scroll-timeline and view() CSS APIs, utilizing EaseMotion's existing keyframes.

Implementation Details

As per the strict contribution guidelines, I will isolate this in the Examples track:

1. Create submissions/examples/ease-scroll-native-viidhii19/.
2. Write style.css containing a .ease-view-reveal-viidhii19 class. It will utilize animation-timeline: view(); and animation-range: entry 10% cover 30%; to map EaseMotion's native fade-in and slide-up keyframes directly to the browser's scroll position without any JS event listeners.
3. Provide demo.html showcasing multiple staggered cards animating purely via CSS scroll parsing.
4. Include README.md explaining browser support and the CSS timeline math.

Track

Standard (HTML/CSS) (submissions/examples/)

Would you like to work on this?

• Yes, I'll build this Next-Gen CSS scroll integration! (GSSoC '26 Contributor)

[github-actions]

Hey @Viidhii19! 👋

Thanks for opening this issue — you've been auto-assigned to it.

Before you start coding, please read the quick checklist:

• Make sure no existing issue already covers this idea
• Read the Contribution Guide before opening a PR
• Add files only inside the submissions/ directory (e.g., submissions/examples/your-feature-name/ or submissions/docs/your-feature-name/)
• Include demo.html · style.css · README.md in your folder
• Max 25 active issues per contributor — unassign others before taking new ones
• Join our official Discord Server (Optional - for general developer chat and support; official issues belong on GitHub!)

🕑 Inactivity rule: Issues with no progress for 24 hours (1 day) will be unassigned and reopened for others.

The maintainer will review your PR once submitted. Good luck! ⚡

[github-actions]

🔒 Issue Resolved & Closed.

This issue has been marked as accepted and successfully resolved. Thanks for participating! ✨