Animation Basics

12 klassische Arten

Was ist eine Animation?

Easing

Wann brauchen wir Animationen?

Patterns

• Transitions
• Supplements
• Feedback
• Demonstrations
• Decorations

nach Rachel Nabors

Transition

• Taking users from place to place in the information space
• Von einem Task zum nächsten
• Grosse Inhaltsblöcke ersetzen

Example by Rajat Kashyap

Supplements

• Sekundäre Information
• Alerts, Notifications, Toasts
• Bringing secondary information on and off the page

Example by Ivan Bjelajac

Feedback

• Die Animation zeigt dem Nutzer, dass seine Aktion registriert wurde.
• Zeigt Zusammenhänge auf zwischen zwei oder mehr Events
• Zeigt Kausalität

Example by Lukáš Straňák

Demonstrations

• Zeigt etwas einfacher als in einem Video oder mit einem Haufen Text
• Erklärt etwas

Example by Reony Tonneyck

Decorations

• Zeigt keine neue Information
• Macht etwas interessanter
• Unterstützt Branding

Example by Alexey Kharitonov

Decorations

Example

Tools

Design

Umsetzung