Skip to content

Emil Kowalski

Design engineering and motion: easing, springs, press states and gestures.

From emil-design-eng ↗ by Emil Kowalski

33 principles

01

Unseen details compound

02

Should it animate at all?

03

Ease-out, never ease-in

04

Keep UI motion under 300ms

05

Springs for gestures

06

Buttons scale on press

07

Never animate from scale(0)

08

Grow popovers from the trigger

09

Warm tooltips open instantly

10

Transitions for interruptions

11

Blur to mask a crossfade

12

Enter with @starting-style

13

Animate with clip-path

14

Hold slow, release fast

15

Drag like a physical object

16

Transform and opacity only

17

Reduced motion, not zero

18

Stagger, briefly

19

Handle edge cases invisibly

20

3D depth with CSS

21

Debug in slow motion

22

Hover parent, animate child

23

Enter by importance

24

Duration scales with size

25

Bounce only after a drag

26

One component, one clock

27

Pop removed items out

28

Swap a character instead

29

Fade edges with a mask

30

Close only the top layer

31

text-wrap: pretty by default

32

Name the motion

33

Taste has reasons