@ederchrono

Web UI animations

Eder Díaz

Software engineer

  • 9+ years Web Development
  • FE-X chapter

Academy speaker

  • Mastering frontend
  • Vue workshop

Let's start with a demo

Disclaimer

This talk is not sponsored by a car company...

Mazda

VW

Last year I bought a car...

Which one do you think I got?

It was the Mazda...

... why?

Because the VW was a 2013 model

Hype Cycle

Why animation is important?

Let's make a small experiment

👀

Tool or weapon?

Convey emotions

Orienting the user

Improve the waiting tolerance

Loader example

Animation > type & color

Animations are not the icing in the cake

We need to plan them from the beginning

Basic terminology

Communication is key

Transition

Our building block

An animation can be made of one or more transitions

A transition is made of...

  • Start state
  • End state
  • Time
  • Delay
  • Easing

Easing

The style of your transition

Also called easing function,

defines the progress of the transition through time

Motion Specs

start state
  - x:0
  - y:0
  - scale:1

end state
  - x:300
  - y:300
  - scale:2
time: 3
delay: 2
ease: EaseIn

Motion Specs

Questions?

Thank you!