Tag Archives: animation

Owl

This owl was drawn by Dorota Pankowska using 13 circles, like Twitter’s Bird Logo: If you can make a bird out of circles, then you can probably make all sorts of animals. I wanted to add something more design-based to … Continue reading

Elsewhere , , Leave a comment

10 principles for smooth web animations

Don’t change any properties besides opacity or transform! Hide content in plain sight with opacity: 0; and pointer-events: none; Don’t animate everything at the same time Slightly increasing transition delays makes it easy to choreograph motion Use a global multiplier … Continue reading

Elsewhere , , , Leave a comment

SVG Line Animation for the Uninitiated

In case you’ve missed Jake’s post “Animated line drawing in SVG” back in 2013, a refresher on the subject 🙂 SVG Line Animation for the Uninitiated →

Elsewhere , , , Leave a comment

How to Use Animation to Improve UX

Animation may be used in a wide range of scales and contexts to unite beauty and function: it can influence behavior, communicate status, guide the users attention and help the user see the results of their actions. Here are just … Continue reading

Elsewhere , , , Leave a comment

Functional Animations: What Makes a Good Transition?

Functional animation is subtle animation that has a clear, logical purpose. It reduces cognitive load, prevents change blindness and establish a better recall in spatial relationships. But there is one more thing. Animation brings user interface to life. […] Successful … Continue reading

Elsewhere , , Leave a comment

SVG Heat Shimmer Effect

See the Pen SVG Heat Shimmer by Bramus! (@bramus) on CodePen. Using JavaScript the seed attribute of the turbulence filter gets randomised at a given interval. Along with the scale transform, the heat shimmer effect is achieved. SVG Heat Shimmer … Continue reading

Elsewhere , , , Leave a comment

AOS – Animate on Scroll

AOS allows you to animate elements as you scroll down, and up. If you scroll back to top, elements will animate to it’s previous state and are ready to animate again if you scroll down. By setting data-aos-* attributes on … Continue reading

Elsewhere , , , Leave a comment

anime.js – JavaScript animation engine

Anime (/ˈæn.ə.meɪ/) is a flexible yet lightweight JavaScript animation library. It works with CSS, Individual Transforms, SVG, DOM attributes and JS Objects. anime.js → anime.js Demos and Examples → Related: Faster UI Animations With Velocity.js

Elsewhere , , Leave a comment

Motion Design in React.js with “React Motion”

import {Motion, spring} from 'react-motion'; // In your render: <Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> {value => <div>{value.x}</div>} </Motion> This library provides an alternative, more powerful API for React’s TransitionGroup. For 95% of use-cases of animating components, we don’t have to … Continue reading

Elsewhere , , , , Leave a comment

Motion Design in React.js: UI Animations with CSSTransitionGroup and TransitionGroup

React Interface without (left) and with (right) animations In this article, I am going to use the official components from React.js addons. There are other components/libraries that are better for the job but at the end of the article you … Continue reading

Elsewhere , , , Leave a comment