Slide 1

Slide 1 text

Val Head • UX Y’All 2022 A new look at UX animation

Slide 2

Slide 2 text

Val Head • UX Y’All 2022 A new look at UX animation

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Animation & UX

Slide 5

Slide 5 text

UX animation • Visual continuity • Reduce cognitive load • Connect contexts • Direct attention • Branding, voice and tone

Slide 6

Slide 6 text

User Preferences

Slide 7

Slide 7 text

“The prefers-reduced-motion media feature is 
 used to detect if the user has requested the 
 system minimize the amount of animation 
 or motion it uses.” prefers-reduced-motion

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

What type of motion to reduce? “…any motion that creates the illusion of movement…” - WCAG

Slide 11

Slide 11 text

Multi-speed or multi-directional movement Commonly triggering motion effects: Spinning effects Constant motion near text When you use any of these in your work, be sure to provide a reduced option.

Slide 12

Slide 12 text

Not on that list: Animated colour changes, opacity fades, 
 non-motion effects

Slide 13

Slide 13 text

How to respect reduced motion requests?

Slide 14

Slide 14 text

1. Identify potentially triggering 
 motion effects 2. Choose a reduced effect 
 based on context Respecting reduced motion requests:

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

CSS @media (prefers-reduced-motion: reduce) { /* reduced behaviour */ }

Slide 18

Slide 18 text

JS let motionQuery = matchMedia('(prefers-reduced-motion)'); const handleReduceMotionChanged = () => { if (motionQuery.matches) //reduced behaviour; } motionQuery.addListener(handleReduceMotionChanged); handleReduceMotionChanged();

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/

Slide 24

Slide 24 text

Container Queries

Slide 25

Slide 25 text

Container Queries in short: • Assign a container • Query details about that container • De fi ne styles of other element(s) based on the results of that query

Slide 26

Slide 26 text

div { container:my-container / inline-size; } CSS

Slide 27

Slide 27 text

@container my-container (max-width:50em) { .thing {
 animation-duration: 250ms; } } CSS

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

@container street (max-width:500px) {
 .cloud1 {animation-duration: 20s;} .cloud2 {animation-duration: 26s;} .skyshapes {display: none;}
 } CSS

Slide 31

Slide 31 text

CSS @keyframes fl oating { 0% {translate: calc(0cqi - var(--cloud-width));} 100% {translate: calc(100cqi + var(--cloud-width));} }

Slide 32

Slide 32 text

Why adjust animation based on container size?

Slide 33

Slide 33 text

Focus or simplify animation for 
 smaller contexts Emphasize with strong motion for 
 larger contexts Change playback sequence 
 when layout changes Why adjust animations based on container size?

Slide 34

Slide 34 text

Container queries are for design too!

Slide 35

Slide 35 text

oddbird.net/2022/08/18/cq-syntax/

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Thank you!