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 to design in slow motion (and then speed everything up later) Take videos of your …
Tag Archives: animation
SVG Line Animation for the Uninitiated
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 a few examples to illustrate places where you can add some animations in your UI …
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 motion design possesses six characteristics. Having built quite a few animations into some (web) interfaces …
Continue reading “Functional Animations: What Makes a Good Transition?”
SVG Heat Shimmer Effect
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 your HTML elements, you can define which animation to use, what timing to use, etc. …
anime.js – JavaScript animation engine
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 resort to using hard-coded easing curves and duration. Set up a stiffness and damping for …
Continue reading “Motion Design in React.js with “React Motion””
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 will get a good amount of React.js animation practice to better understand these other components. …