Skip to content

Instantly share code, notes, and snippets.

@idan

idan/animation.md

Last active December 26, 2015 00:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save idan/7063008 to your computer and use it in GitHub Desktop.
Save idan/7063008 to your computer and use it in GitHub Desktop.
Download ZIP
Minimum Viable Animation
Raw
animation.md

Even in miniscule doses, animation makes such a difference in how things are perceived.

@jacobian introduced me to the following lovely gif:

An animated gif meme showing Carl Sagan saying “You’re Awesome”

Then @bitprophet, on IRC:

I need to make a version of that which says "no, YOU'RE awesome" ;)

Um.

An animated gif of Barney from How I Met Your Mother saying “CHALLENGE ACCEPTED”

And it serves as a great example for the animation stuff. I'll keep it brief.

We’re sensitive to the tiniest amount of animation. Often, that's all you really want—the minimum perceptible thing. Any more is too noticable, because your users will be seeing this animation over, and over, (and over), and over again.

How little animation can we still feel? Compare the addition of the "no" in both images:

Has Transition

gif with transitions

No Transition

gif without transitions

The transition is all of one frame, sanwiched between the 100% invisible (startpoint) and 100% visible (endpoint). It's 50% opaque, and it appears for all of 0.05 seconds.

Screenshot of Photoshop with the frame indicated

Sometimes, that's all it takes for something to not feel like a lightswitch.

Discuss on HN.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment