When is it best to use CSS for an animation, and when is it best to use JavaScript? How do you choose?

Short answer

If you can animate it in CSS (transitions or keyframes), then do it there. The browser will always be able to optimize it better, rather than asking your javascript every 16ms what it should do.

1 / 60 = 0.016666667 = 16ms
1/60=0.016666667=16ms

Long Answer

Performance is the art of avoiding work

People want performance

JAVASCRIPT Animations

Runs on one thread along with other JS, style calculations, layout, and painting

 

Chance to miss to a frame

-

JS

Style/Layout

Paint

Composite

More control

play(), pause(), reverse() and restart(), on scroll

+

Css Animations

Lacks expressive control of JavaScript

Limited in complexity of animations

-

The browser is able optimize more

Hardware acceleration

a.k.a., “Here you go, GPU

+

Hardware acceleration? How?

PAINT STORMS

JS

Style/Layout

Paint

Composite

Style / Layout

Paint Storm Triggers

Paint

height

width

padding

font-size

etc.

background

color

border-radius

visibility

etc.

JS

Style/Layout

Paint

Composite

Safe Properties

rotate()

scale()

translate()

opacity: 0...1

Less work = Performance 

CSS transition vs requestAnimationFrame?

If you need the control of JavaScript (stop, start, on scroll), 

How can we leverage animations to make our digital products more human-centric? What are some examples that succeed at this?

PRINCIPLES OF ANIMATION

12

Squash & Stretch

Anicipation

Staging

Straight Ahead & Pose to Pose

Follow Through & Overlapping Action

Slow Out & Slow In

Arcs

Secondary Action

Timing

Exaggeration

Solid Drawing

Appeal

Do

Don't

Functional

Two kinds of UI Animations

Presentational

Improve usability

Clarify use

Personality

Joy and delight

Reinforce a feeling

Transitions vs Keyframes?

Transition has two keyframes

.button {
    color: #1b2794;
}

.button:hover {
    color: #ff5b5a;
}

Keyframes can have ∞*

@keyframes bounce {

    from { ... }

    to { ... }

}

* as much memory as your computer can handle

@keyframes bounce {

    0% { ... }

    10% { ... }

    77% { ... }

    100% { ... }

}

New ground: SVG

JavaScript

Some Frameworks

CSS

Thank you.