10 principles for smooth web animations Posted byBramus! November 25, 2016 Leave a comment on 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 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. 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 …)