jedi principles of ui animation

Jedi Principles of UI animation

Animation by superwhite

fiorine

Animation by superwhite

Animation by superwhite

Blockbusting the UI

Animation by superwhite

Animation by Jakub Antalik

Functional Material Delightful

Tell the story, introduce your UX characters

Make your UI universe feel real

and consistent

Make it fun,memorable and

entertaining

Perceived UX

Attention drivers

Feedback and Feedforward

Predictable UI

Material layers

Spatial relationships and hierarchy

Suspension of disbelief

Entertainment

Unique, recognizable motion brand

Functional

Functional animation fills the comprehension gaps.

Animation by JEddie Lobanovskiy

Animation by Isil Uzum

Rachel Nabors

Animation by Xavier Coulombe-Murray

Material

Animation by Aurélien Salomon

Animation by Damian Kidd

Material animation makes UI more predictable and

easier to navigate.

Animation by Kit Oliynyk

Animation by Jason Teunissen

Delightful

Animation by Chuan

Animation by Konstantine Trundayev

Animation by Brock Kenzler

Make animation a part of your brand.

The Disney’s Canon

Animation by superwhite

Solid Drawing Straight-ahead and Pose-to-pose Squash and Stretch Arcs

Staging Timing Follow-through and Overlapping Secondary Action

Ease In and Ease Out Anticipation Exaggeration Appeal

Material

Solid Drawing

Material

Straight-ahead and Pose-to-pose

Material Delightful

Squash and Stretch

Animation by Kit Oliynyk

Material Delightful

Arcs

Animation by Ryan Roehl

Staging Timing Follow-through and Overlapping Secondary Action

Ease In and Ease Out Anticipation

Solid Drawing Straight-ahead and Pose-to-pose Squash and Stretch Arcs

Exaggeration Appeal

Functional

Staging

Animation by Benedikt Matern

Functional Material

Timing

Animation by Kreativa Studio

Animation by BeardChicken

Functional Material

Ease In and Ease Out

Animation by Rustem Sirazetdinov

Animation by Andrej Radisic

Animation by Sebastiano Guerriero

Functional Material

Follow-Through and Overlapping

Animation by Sam Thibault

Animation by Oksana Kulishenko

Animation by Sergey Valiukh

Functional

Secondary Action

Animation by Justin Ruckman

Functional

Anticipation

Animation by Jakub Reis

Animation by Moldiv

Staging Timing Follow-through and Overlapping Secondary Action

Ease In and Ease Out Anticipation

Solid Drawing Straight-ahead and Pose-to-pose Squash and Stretch Arcs

Exaggeration Appeal

Delightful Functional

Exaggeration

Animation by Tobias Arréhn

Animation by xjw

Delightful

Appeal

Animation by Thorarinn

Animation by Zee Young

Functional fills the gapsfor people to

follow your story.

Material helps people get from A to B and then back again.

Delightful makes people

love it and come back for more.

dribbble.com/fiorine/bucketstwitter.com/fiorineThank you.

Animation by superwhite