How to Play and Pause CSS Animations with CSS Custom Properties

Mads Stoumann, writing for CSS-Tricks, starts off with a simple idea: set a Custom Property to either playing or paused to control animation-play-state.

[data-animation] {
    /* … */
    animation-play-state: var(--animps, running);
}

/* Use a checkbox to pause animations */
[data-animation-pause]:checked ~ [data-animation] {
  --animps: paused;
}

But one of the listed use cases is great: a pure CSS slideshow that has a play/pause button:

See the Pen
<details> Play/Pause Animations
by Mads Stoumann (@stoumann)
on CodePen.

Nice one!

More use cases in the full post, including the use of an IntersectionObserver to pause animations for elements that are offscreen.

How to Play and Pause CSS Animations with CSS Custom Properties →

Enhancing User Experience With CSS Animations

Great talk by Stéphanie Walter (starting at 39:00):

With practical examples, I show why certain animations work better than others and how to find the best timing and duration to build UI animations that “feel right”. I explain how our brain works, why and how animations contribute to improving user experience. And what you need to be careful about to build inclusive and accessible motion and avoid making some people sick.

Be sure to check the post on her website too, as it contains a full writeup, videos, examples, slides, links to extra resources, etc.

Enhancing User Experience With CSS Animations →

Blind Spot

While working with CCTV cameras in a project, I was reminded of this short film from 2007:

Pose Animator – Animate SVG Illustrations using your Camera

This is crazy:

Pose Animator takes a 2D vector illustration and animates its containing curves in real-time based on the recognition result from PoseNet and FaceMesh. It borrows the idea of skeleton-based animation from computer graphics and applies it to vector characters.

Built on top of PoseNet to track the body’s pose, and the aforementioned FaceMesh to track the face.

Pose Animator →
Pose Animator Demos →

Staggered Animations with CSS Custom Properties

Paul Hebert on the Paul Hebert blog:

Movement in nature doesn’t happen all at once. Imagine a flock of birds taking off, raindrops splashing on the ground, or trees bending in the wind. The magic of these moments comes from many small movements overlapping and converging. I wanted to bring this natural movement into my web animations.

Instead of setting an incremental transition-delay on each :nth-of-type() element to achieve this effect, a different approach was taken: the transition-delay was set once and CSS Custom Property is used as a multiplier to increase that delay per element.

<li class="Menu__item">
  <a href="#" class="Menu__link" style="--index: 0;">Babar</a>
</li>
<li class="Menu__item">
  <a href="#" class="Menu__link" style="--index: 1;">Dumbo</a>
</li>
<li class="Menu__item">
  <a href="#" class="Menu__link" style="--index: 2;">Echo</a>
</li>
<!-- etc. -->
.Menu__link {
  --index: 0;
  transition-delay: calc(0.025s * var(--index));
}

Here’s a pen with the final result:

[CODEPEN EMBED]

Staggered Animations with CSS Custom Properties →

💡 You can also use CSS Custom Properties as binary conditions for your styles. Combine it with a media query such as prefers-reduced-motion and you can disable animations that way.

💁‍♂️ Did you know the part after the : for CSS Custom Properties doesn’t need to be valid CSS? It’s only until it is used that it’ll be evaluated. This fact opens up the way for currying in CSS.

:root {
  --f-2: ((2 / 16 - var(--f-foot)) * var(--f-hill));
}

body {
  font-size: calc(var(--f-2) * 16);
}

Building mobile-first web animations in React

Talk by Alex Holachek, as brought forward at React Conf 2019:

As the technology to create Progressive Web Apps continues to mature, React developers have the opportunity to write web apps that in some cases can rival native ones in terms of speed and convenience.

However, one barrier to feature parity is the difficulty of creating a native-like UI transition and interaction experience on the mobile web, especially on lower-end devices.

I’ll be discussing various considerations, tips and techniques to create a web app in React that looks, moves, and feels as close to a native mobile app as possible.

Think of gesture-driven animations like these here:

Slides →
Repo →

SVG Line Animation with Vivus.js

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like.

Think SVG line animations, but then controlled through JavaScript.

vivus.js – svg animation →

The Real Fake Cameras Of Toy Story 4

The Nerdwriter on what makes Toy Story 4 feel so authentic.