Motion One — WAAPI Powered Animation Library

A new animation library, built on the Web Animations API for the smallest filesize and the fastest performance.

import { animate } from "motion"

const boxes = document.querySelectorAll(".box");
animate(boxes, { backgroundColor: "red" });

Motion One →

The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 3)

As a follow-up to my two earlier posts on Scroll-Linked Animations with CSS Scroll-Timeline (part 1 and part 2), I wrote an article for CSS-Tricks covering some practical use-cases (with code).

Today the article got published 🙂

Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines →

Pure CSS Stopwatch ⏱️

Nice demo by Jhey in which he created a Pure CSS Stopwatch:

It uses a clever combination of CSS Animations, CSS Counters, and @property:

  1. Each digit gets its own CSS Animation with its own timing.
  2. Inside each animation the value of a CSS Counter is adjusted.
  3. By defining those values as numbers using CSS @property, CSS knows how how to “animate” (read: interpolate) the values.

The animation play state is controlled using a checkbox, as detailed here.

💁‍♂️ CSS Counters is one of the 9 Underutilized CSS Features