Rethinking Batman’s classic outfit in a user-centric way

From fonts to animated movies, curves and surfaces constitute fundamental building blocks of many geometrical designs. Over the course of this blog post I’ll explain how this model of a mask can be very smooth despite being described by a limited number of small points that you can drag around to change the mask’s shape:

Easy to implement, 3D typography for the web. Works with every font.

Free, simple animated SVG editor.

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Over the last 5 years, it has been my privilege to coach and mentor UX & UI designers in over 40 countries, and at hundreds of the top brands and design consultancies through my workshops and tutorials on UI Animation. via Pocket

Easily add high-quality animation to any native app.

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

CSS can be used to style and animate scalable vector graphics, much like it is used to style and animate HTML elements. via Pocket

Explore the deepest secrets of the ocean with some of Firefox Developer Edition 44’s newest tools, designed to take the pain out of CSS animation.

Введение в SVG-анимацию, фрагмент книги Сары Дрэснер, которая выйдет в O’Reilly весной 2017 —… https://t.co/hIZ36nIj8T

Principle makes it easy to design animated and interactive user interfaces. Whether you're designing the flow of a multi-screen app, or new interactions and animations, Principle lets you create designs that look and feel amazing.

Animating elements in your mobile applications is easy. Animating elements in your mobile applications properly may be easy, too… if you follow our tips here.

Even in the ancient times people knew about the great power of motion. Literature, art, folklore, technologies all witness numerous attempts of people to explain motion as one of the brightest features of life. via Pocket

This feature allows you to script the animation of your SVG. To do this, the custom values will be set directly in the DOM of the SVG.

Here is an example using scenario-sync.
I would recommend you look at the source code and the readme file for more information.

Objects in real life don’t just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly, and slow it down as it comes out. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor.

I like using diagrams as a way of showing information flow or browser behaviour, but large diagrams can be daunting at first glance. When I gave talks about the Application Cache and rendering performance I started with a blank screen and made the diagrams appear to draw themselves bit by bit as I described the process. Here's how it's done:

Framer.js is an open source JavaScript framework for rapid prototyping. Framer.js allows you to define animations and interactions, complete with filters, spring physics, 3D effects and more. It's bundled with Framer Generator, an application that allows you to import layers directly out of Photoshop and Sketch.

You need the potential to design something completely new. Prototyping shouldn’t limit you. Framer is a prototyping tool that uses code to make anything possible. Pioneer new patterns and make groundbreaking design. Find the best solution, not just the expected one.