Animations for Web

What?

...process of creating motion and shape change illusion...

Image courtesy: Smashing Magazine.

Source: Wikipedia.

Why?

Source: Google.

Image courtesy: Smashing Magazine.

Animations are a huge part of making compelling web applications and sites.

Motion design can effectively guide the user’s attention in ways that both inform and delight.

Image courtesy: Medium.

Source: Google.

When?

The most basic use of animation is in

transitions...

Source: Google.

Image courtesy: BeyondKinetic.

Examples:

• Labuat - Soy Tu Aire.
• Ellie Goulding - Lights.
• Letters, Inc.
• BrightMedia.
• 100 McDonald's Moments.
• Species In Pieces.
• Gyroscope.
• Chrome Dev Summit.
• The Illusion of Life.
• GreenSock: Examples & Showcases.
• Hover States.
• FWA.
• Awwwards.

Further Reading:

• Google: Animations.
• Google: Authentic motion.
• Google: Responsive interaction.
• Google: Meaningful transitions.
• Google: Delightful details.
• Transitional Interfaces.
• Smart Transitions in User Experience Design.
• The Principles of UX Choreography.
• Giving Animations Life.
• The Art of UI Animations.
• Paul Lewis: Interaction Pro Tips series.
• The State of Animation 2014.
• 5 steps for mastering web animation.
• Rachel Nabors: Animation and UX resources.
• Motion UI Design Principles.