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.
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.
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.
💁♂️ 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.
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:
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.
Using a Data URI he injects an SVG as the url for the border-image CSS property. That SVG itself is then animated using a self-contained tad of inline CSS.
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.