- Who am I?

- WHY AM I HERE?

- WHAt are the 12 principles?

- Case study: Dropdown

- bonus principle: Arcs

- Questions!

 

- CTO AT PEG.co

- CODER

- Not an animation expert

"CSS ANIMATION"

http://goo.gl/b8Pzgn

EMOTIONAL

12 principles

1. EASE-IN

EASE-OUT

A

B

2. Squash and stretch

3. Framing/

anticipation

 

4. follow through

5. Secondary action

BONUS: ARCS

- EASE-in, EASE-out

- Squash & stretch

- FRAMING & ANTICIPATION

- Follow through

- Secondary action

- arcs

 

slides.com/alexpeattie/disney

Questions?

slides.com/alexpeattie/disney

Disney's 12 Principles for Animating on the Web

By alexpeattie

Disney's 12 Principles for Animating on the Web

Web animation was an emerging trend of 2014 and is set to hit the big time in 2015. With CSS3 and improvements in browsers and hardware, we can now create stunning animations in our products. We have the tech, but that's not enough. What can we learn from the old masters of animation? In this talk we'll look at some of Disney's 12 Principles of Animation to see how they can be applied today, and how can we make something that doesn't just look good, but feels good.

  • 2,475