EaseMotion CSS: Animation-First UI Framework

AuthorSAPTARSHI-coder

Last UpdateJuly 13, 2026

LicenseMIT

Features:

Human-readable animation and layout utilities.
Entrance, exit, looping, and hover motion effects.
Flexbox, grid, spacing, and alignment helpers.
Button, card, navbar, marquee, chip, footer, and masonry styles.
CDN, npm, modular CSS, and SCSS installation paths.
Project-wide design tokens for color, motion, spacing, shape, and typography.
Optional viewport reveal behavior through Intersection Observer.
Framework-neutral classes for component-based projects.
Cascade layers for predictable style overrides.
Focus-visible styles and reduced-motion handling for scroll reveals.

How To Use It:

Installation

Include the full browser bundle on the webpage.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion.min.css"
/>

Or install the package through npm for bundler-based projects.

npm install easemotion-css

Import the minified stylesheet through the package export map.

// main.js, main.jsx, app.js, or another global entry file
import 'easemotion-css/min';

The package root imports the readable stylesheet instead.

import 'easemotion-css';

Basic Usage

Stack animation, delay, layout, component, and hover classes on regular HTML elements. The following hero uses CSS only.

<section class="ease-center ease-padding-16">
  <div class="ease-card ease-card-shadow ease-slide-up">
    <h1 class="ease-fade-in">Ship the next interface</h1>
    <p class="ease-slide-up ease-delay-100">
      Compose motion and layout through readable utility classes.
    </p>
    <a
      class="ease-btn ease-btn-primary ease-btn-pill ease-hover-grow ease-delay-200"
      href="#release-notes"
    >
      View release notes
    </a>
  </div>
</section>

Entrance classes run when the element appears in the document. Delay helpers shift the start time, while hover utilities react to pointer interaction.

Advanced Usages

Create a staggered entrance sequence

<div class="ease-grid ease-grid-auto ease-gap-6">
  <article class="ease-card ease-slide-up ease-delay-100">Starter</article>
  <article class="ease-card ease-slide-up ease-delay-200">Team</article>
  <article class="ease-card ease-slide-up ease-delay-300">Business</article>
</div>

The built-in duration helpers set animation speeds to 150ms, 300ms, or 600ms.

<div class="ease-fade-in ease-duration-fast">Fast status update</div>
<div class="ease-slide-up ease-duration-medium">Default panel entrance</div>
<div class="ease-zoom-in ease-duration-slow">Slow feature highlight</div>

Limit looping animations

-root {
  --ease-animation-iterations: 3;
}
.sync-indicator {
  --ease-animation-iterations: 2;
}

<span class="sync-indicator ease-rotate" aria-label="Syncing"></span>

The default token value is infinite.

Reveal content on scroll

Viewport reveals require the optional reveal.js file. Load it near the closing body tag, then combine the reveal class with an animation class.

<section class="ease-reveal ease-slide-up">
  <h2>Quarterly product updates</h2>
  <p>This section enters when it reaches the viewport threshold.</p>
</section>
<script src="https://cdn.jsdelivr.net/npm/easemotion-css/core/reveal.js"></script>

The script observes each reveal element once. It adds the active state when at least 15 percent of the element enters the viewport, then stops observing that element.

Load only selected animation categories

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion/variables.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion/fade.css"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/easemotion-css/easemotion/slide.css"
/>

The variables file must appear before every modular animation file.

Use EaseMotion CSS in React

Import the stylesheet once in the application entry file. JSX uses className, but the utility names remain unchanged.

import 'easemotion-css/min';
export default function ReleaseCard() {
  return (
    <article className="ease-card ease-card-shadow ease-slide-up">
      <h2 className="ease-fade-in ease-delay-100">Version notes</h2>
      <button className="ease-btn ease-btn-primary ease-hover-lift">
        Open changelog
      </button>
    </article>
  );
}

Next.js App Router projects should place the import in app/layout.js. Pages Router projects should place it in pages/_app.js.

Apply animations through SCSS mixins

The SCSS layer fits projects that want semantic component classes instead of animation utilities in the markup. Sass compiles the mixins into normal CSS.

@use 'easemotion-css/scss' as ease;
.release-panel {
  @include ease.slide-up($duration: 500ms, $delay: 120ms);
}
.release-link {
  @include ease.transition(color, $duration: 150ms);
  &:hover {
    color: var(--ease-color-primary-dark);
  }
}

The named SCSS mixins include fade, slide, and zoom entrance or exit effects. The base animation mixin accepts a keyframe name, duration, easing curve, delay, fill mode, and iteration count.

Configuration Options

Override the CSS custom properties on :root for a site-wide theme or on a component selector for a local variation.

Motion Tokens

--ease-speed-fast (time, 150ms): Sets the fast duration helper and short transitions.
--ease-speed-medium (time, 300ms): Sets the default animation duration.
--ease-speed-slow (time, 600ms): Sets the slow duration helper.
--ease-ease (timing function): Sets the default motion curve.
--ease-ease-out (timing function): Sets the exit-oriented easing curve.
--ease-ease-in (timing function): Sets the entrance-oriented easing curve.
--ease-ease-linear (timing function): Sets linear motion.
--ease-ease-bounce (timing function): Sets the overshooting bounce curve.
--ease-animation-iterations (number or infinite): Controls looping animation cycles.

Color Tokens

--ease-color-primary (color): Sets the main accent color.
--ease-color-primary-light (color): Sets the lighter primary shade.
--ease-color-primary-dark (color): Sets the darker primary shade.
--ease-color-secondary (color): Sets the secondary accent color.
--ease-color-success (color): Sets success states.
--ease-color-danger (color): Sets danger states.
--ease-color-warning (color): Sets warning states.
--ease-color-info (color): Sets informational states.
--ease-color-bg (color): Sets the page background.
--ease-color-surface (color): Sets card and component surfaces.
--ease-color-text (color): Sets primary text.
--ease-color-muted (color): Sets secondary text.
--ease-selection-color (color): Sets selected text color.
--ease-glass-bg (color): Sets glass component backgrounds.
--ease-glass-border (color): Sets glass component borders.

Spacing and Shape Tokens

--ease-space-1 through --ease-space-16 (length): Supply the framework spacing scale from 0.25rem to 4rem.
--ease-radius-sm (length, 0.25rem): Sets small corner rounding.
--ease-radius-md (length, 0.5rem): Sets default corner rounding.
--ease-radius-lg (length, 1rem): Sets large corner rounding.
--ease-radius-xl (length, 1.5rem): Sets extra-large corner rounding.
--ease-radius-full (length, 9999px): Creates pill and circular shapes.

Shadow and Glow Tokens

--ease-shadow-sm (shadow): Sets low elevation.
--ease-shadow-md (shadow): Sets default component elevation.
--ease-shadow-lg (shadow): Sets prominent elevation.
--ease-shadow-xl (shadow): Sets the largest bundled elevation.
--ease-glow-primary (shadow): Sets the primary hover glow.
--ease-glow-secondary (shadow): Sets the secondary hover glow.
--ease-glow-success (shadow): Sets the success glow.
--ease-glow-danger (shadow): Sets the danger glow.
--ease-glow-info (shadow): Sets the informational glow.

Typography and Layout Tokens

--ease-font-sans (font family): Sets the main interface font stack.
--ease-font-mono (font family): Sets the code font stack.
--ease-text-xs through --ease-text-4xl (length): Supply the bundled type scale.
--ease-leading-tight (number): Sets compact line height.
--ease-leading-normal (number): Sets normal body line height.
--ease-leading-loose (number): Sets relaxed line height.
--ease-container-max (length, 1200px): Sets the main container limit.
--ease-z-base (integer): Sets the base stacking level.
--ease-z-raised (integer): Sets raised component stacking.
--ease-z-overlay (integer): Sets overlay stacking.
--ease-z-modal (integer): Sets modal stacking.
--ease-z-toast (integer): Sets toast stacking.

The breakpoint tokens document the framework values at 640px, 768px, 1024px, and 1280px. CSS custom properties do not work inside media query conditions, so copy the raw breakpoint value into each @media rule.

-root {
  --ease-color-primary: #0f766e;
  --ease-color-primary-dark: #115e59;
  --ease-speed-medium: 420ms;
  --ease-radius-md: 0.875rem;
  --ease-shadow-md: 0 10px 30px rgb(15 23 42 / 0.14);
}
@media (min-width: 768px) {
  .release-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

React Animate Wrapper Options

type (string): Selects an EaseMotion animation name such as fade-in, slide-up, or zoom-in.
duration (fast, medium, slow, or number): Sets a duration keyword or a millisecond value. The default is medium.
delay (number): Sets the start delay in milliseconds. The default is 0.
hover (string): Adds a hover effect name such as lift, glow, or scale.
tag (string): Selects the rendered HTML element. The default is div.
className (string): Adds project-specific classes.

Alternatives:

FAQs:

Q: Is EaseMotion CSS completely CSS-only?
A: The animation, layout, and component utilities run through CSS. Scroll-triggered reveals require the optional core/reveal.js file.

Q: Should I use the CDN bundle or npm package?
A: The CDN bundle fits static pages and quick browser projects. The npm package fits bundler-based applications and provides package exports for the readable and minified stylesheets.

Q: Why does an element with ease-reveal stay hidden?
A: Confirm that core/reveal.js loads and that the element also has an animation class such as ease-slide-up. Check the browser console for a failed CDN request or an incorrect local asset path.

Q: How should I handle users who prefer reduced motion?
A: The reveal script shows observed content immediately when prefers-reduced-motion: reduce is active. Add a project-level media query that disables or shortens the remaining animation classes when stricter motion reduction is required.

Q: How do I stop looping animations like ease-bounce from running forever?
A: Set the --ease-animation-iterations CSS variable in :root to a specific number.