Easy Ease: Webflow Easing Modes Demo

First click on a button sends the snowman to the right in 700ms. Second click gets it back in 500ms.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
i
Ease (default)Ease InEase OutEase In OutLinearEase In QuadEase In CubicEase In QuartEase In QuintEase In SineEase In ExpoEase In CircEase In BackEase Out QuadEase Out CubicEase Out QuartEase Out QuintEase Out SineEase Out ExpoEase Out CircEase Out BackEase In Out QuadEase In Out CubicEase In Out QuartEase In Out QuintEase In Out ExpoEase In Out SineEase In Out CircEase In Out Back

Ease is the default easing mode. Change it, it’s the most boring one, too safe, too mellow. If you don’t know what you’re looking for, change for Ease In Out or Ease In Sine.good practice

500ms is the default span for all animations. It’s a bit long. Try to make all your minor UI animations last not more than 300ms. good practice

If your animation has an inverse step, make it quicker than the first one. Say you unfold an element in 300ms, make it go away in 150ms. Don’t necessary use the same easing mode for both. good practice

Make your animations snap! Very often, for the first part of a revealing animation, it’s better to snap it out instead of easing it out. Try Ease In Cubic, Ease In Quart, Ease in Quint, on unfolding animations for example. good practice