Description
I propose adding a lightweight, vanilla JavaScript utility (under 1KB) using the native IntersectionObserver API. This utility will automatically detect when elements with specific EaseMotion classes (e.g., ease-scroll-fade-up) enter the viewport and trigger their CSS animations.
This addresses the "Scroll-triggered animations (IntersectionObserver)" requirement currently listed as "Planned — v1.2" in the project Roadmap.
Why is this useful for EaseMotion CSS?
While EaseMotion excels at hover and state-based animations, modern landing pages heavily rely on scroll-reveal animations to engage users as they scroll down the page. Relying on heavy libraries like AOS (Animate On Scroll) or GSAP defeats the framework's lightweight philosophy. By providing a tiny, optional Vanilla JS observer script paired with CSS keyframes, developers get performant scroll animations natively.
HTML Snippet
html
<script src="path/to/ease-scroll.js"></script>
Welcome to the Next Section
This content will slide up and fade in smoothly when you scroll to it.
CSS & JS Snippet
CSS (style.css):
css
/* Base state before scrolling into view /
.ease-scroll-trigger {
opacity: 0;
visibility: hidden;
will-change: opacity, transform;
}
/ ── Animation Classes ── */
.ease-scroll-fade-up.ease-in-view {
animation: easeFadeUp var(--ease-speed-slow) var(--ease-ease-out) forwards;
visibility: visible;
}
.ease-scroll-scale-in.ease-in-view {
animation: easeScaleIn var(--ease-speed-slow) var(--ease-ease-out) forwards;
visibility: visible;
}
@Keyframes easeFadeUp {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
@Keyframes easeScaleIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
JS (ease-scroll.js):
javascript
document.addEventListener("DOMContentLoaded", () => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('ease-in-view');
// Optional: Stop observing once animated
observer.unobserve(entry.target);
}
});
}, {
root: null,
rootMargin: '0px',
threshold: 0.15 // Trigger when 15% of element is visible
});
document.querySelectorAll('.ease-scroll-trigger').forEach(el => {
observer.observe(el);
});
});
Visual Reference (optional)
N/A
Checklist
I have read the
CONTRIBUTING.md
document.
I have checked for existing issues proposing the same feature.
I understand that my proposed class names or structure may be modified by the maintainer.
Description
I propose adding a lightweight, vanilla JavaScript utility (under 1KB) using the native IntersectionObserver API. This utility will automatically detect when elements with specific EaseMotion classes (e.g., ease-scroll-fade-up) enter the viewport and trigger their CSS animations.
This addresses the "Scroll-triggered animations (IntersectionObserver)" requirement currently listed as "Planned — v1.2" in the project Roadmap.
Why is this useful for EaseMotion CSS?
While EaseMotion excels at hover and state-based animations, modern landing pages heavily rely on scroll-reveal animations to engage users as they scroll down the page. Relying on heavy libraries like AOS (Animate On Scroll) or GSAP defeats the framework's lightweight philosophy. By providing a tiny, optional Vanilla JS observer script paired with CSS keyframes, developers get performant scroll animations natively.
HTML Snippet
<script src="path/to/ease-scroll.js"></script>html
Welcome to the Next Section
This content will slide up and fade in smoothly when you scroll to it.
css
/* Base state before scrolling into view /
.ease-scroll-trigger {
opacity: 0;
visibility: hidden;
will-change: opacity, transform;
}
/ ── Animation Classes ── */
.ease-scroll-fade-up.ease-in-view {
animation: easeFadeUp var(--ease-speed-slow) var(--ease-ease-out) forwards;
visibility: visible;
}
.ease-scroll-scale-in.ease-in-view {
animation: easeScaleIn var(--ease-speed-slow) var(--ease-ease-out) forwards;
visibility: visible;
}
@Keyframes easeFadeUp {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
@Keyframes easeScaleIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
JS (ease-scroll.js):
javascript
document.addEventListener("DOMContentLoaded", () => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('ease-in-view');
// Optional: Stop observing once animated
observer.unobserve(entry.target);
}
});
}, {
root: null,
rootMargin: '0px',
threshold: 0.15 // Trigger when 15% of element is visible
});
document.querySelectorAll('.ease-scroll-trigger').forEach(el => {
observer.observe(el);
});
});
Visual Reference (optional)
N/A
Checklist
I have read the
CONTRIBUTING.md
document.
I have checked for existing issues proposing the same feature.
I understand that my proposed class names or structure may be modified by the maintainer.