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.

Direction Aware Hover Effect

A thing I commonly see nowadays are animated lines underneath menus and links:

Show Pen

One issue with that though: when hovering over an item the animation does not start from the place where you hover, but from a fixed point (here: bottom-center).

Try hovering an item from one of its edges and you’ll see: the animation is disconnected from your point of entry. This can feel weird, especially for wide items.

Thanks to CSS Custom Properties (aka CSS Variables) and a little bit of JavaScript, the animation can be enhanced. Here’s a demo by Tobias Reich:

Show Pen

Also feels really smooth when moving your cursor horizontally over the items.

Direction Aware Hover Effect Demo (CodePen) →

🤩 I really like this JS/CSS Custom Properties combo, it’s so powerful … that’s one of the reasons why I and others are really excited about CSS Custom Properties

💡 You could keep this pure CSS, but that would mean injecting lots of extra elements to detect the direction.