Profile picture of Michael Großklaus

Michael Großklaus

Doing frontend things at factorial.io and created miyagi.dev.

GitHub
github.com/mgrsskls
Mastodon
indieweb.social/@mgrsskls
RSS
/feed.xml

Built with Eleventy & hosted on Netlify.

Animation principles

Date:

The following principles are valid for all kinds of animations:

  • Appearing: ease-out, longer animation
  • Disappearing: ease-in, shorter animation
  • Moving: ease-in-out
  • Long distance / big screen: longer animation
  • Short distance / small screen: shorter animation

When fading in list items, that means multiple items:

  • overlapping, not one after, not at the same time
  • vertical: top to bottom
  • grid: top left to bottom right