- 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 UI and replay them to get a valuable third-person perspective
- Network activity can cause lag
- Don’t bind directly to scroll
- Test on mobile early, and often
- Test frequently on multiple devices
10 principles for smooth web animations →
Published by Bramus!
Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)
View more posts