JavaScript: Restart all CSS Animations of an Element

Recently built a demo that demonstrated a specific animation. Only problem: if you missed it, you had no way of restarting it. Instead of forcing the visitor to reload the page, this little JavaScript-snippet – attached to a button click – did the trick: const restartAnimations = ($el) => { $el.getAnimations().forEach((anim) => { anim.cancel();; …

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 → Be sure to also read the “Improvements over WAAPI” page.

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: See the Pen Pure CSS Working Stopwatch 😎 (@property) by Jhey (@jh3y) on CodePen. It uses a clever combination of CSS Animations, CSS Counters, and @property: Each digit gets its own CSS Animation with its own timing. Inside each animation the value of …