Stop Using Gratuitous UI Animation(

over 7 years ago from Sophie Paxton, UX Designer

  • Dirk HCM van BoxtelDirk HCM van Boxtel, over 7 years ago

    Note about animation speed: it depends on what you're animating. If it's a small visual, between 200 and 250 is great and looks "instant". 300 fits some bigger animations, and you can go all the way up to 1 second of animation for things like "scroll to top" or other page-wide animations.

    Easing is just as important on this as the speed.

    The reason speeds should vary, is because of the purpose of an animation.

    Let's say you have an index at the top of your page, and when you click it, you animate the scroll down the page to get to the content. Now ask yourself: why am I animating this?

    In the above example, animation is used to convey a sense of position. If you go too fast, a user won't have any idea where on the page they are, and the animation was useless and might as well have been instant.

    Compare this to a hover state, where you just want to show something is interacted with: as long as it's clear almost instantly that someone is hovering over it, the app will feel responsive. The slower you animate however, the less likely the user will notice the state.

    Again, not dismissing "usually around 300ms", because as a general rule, that's just fine. Just felt like expanding on what the word usually means here! :)

    2 points