Tag Archives: animation

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

Three “buckets” of UI animation

Functional: Make sure your animation solves the user’s need first Material: Design consistent UI layers that allow spatially meaningful transitions Delightful: Give your animation some love, and your user will love your product back! Jedi Principles of UI Animation →

Elsewhere , , , Leave a comment