Newton meets CSS

Newton meets CSS

María Evangelina Ferreira

Hello!

This is a talk about
Timing-Functions

Web Design & Timing Animations

Web Design & Timing Animations

Itinerary

  1. Animation
    • Frames
    • Rhythm
    • Keyframes
  2. Steps()
  3. Physics of Motion
    • Predefined timing-functions
    • Cubic-Bézier()

Animation

Animation is a time-based form of Art.

Movement through time

Working with frames

Each Frame is a part of the animation

Working with frames

A set of 8 frames

A set of 8 frames

The disposal of middle frames indicates rhythm.

@keyframes in CSS

@keyframes

  1. We create the animation, providing the keyframes
  2. We apply the animation to the element
    • Duration: Seconds or ms
    • Iteration-count: Number or infinite
    • Direction: Normal, reverse, alternate, alternate-reverse
    • Fill-mode: What happens when it ends
    • Play-state: Paused or running
    • Timing-function

Basic Animation Example

			@keyframes name{
				from{
					background-color: Tomato;
				}
				to{
					background-color: Azure;
				}
			}
			

Invisibility cloak

More Keyframes

			@keyframes name{
				from{
					background: CadetBlue;
				}
				30%{
					background: Chocolate;
				}
				67%{
					background: SkyBlue;
				}
				to{
					background: CornflowerBlue;
				}
			}
			

Harry goes to party

Timing-functions

Steps Function

Steps() Example

Chronophotography

Steps Function, Animation pioneers

Jules Marey

Known for researching body motion

Jules Marey

Jules Marey Photography

Jules Marey

Jules Marey Photography

Eadweard Muybride

Known for the Steps() function... and GIFs.

Eadweard Muybride

Eadweard Muybride Photography

Eadweard Muybride

Eadweard Muybride Photography

Eadweard Muybride

Eadweard Muybride Photography

Eadweard Muybride

Eadweard Muybride Photography

Steps() Example

Gemma Correll steps example

Steps() Example

Gemma Correll steps example

9 images. 765px wide, 212px high. Each image is: 85px/212px.

Steps() Example

Timing-functions belong in Transitions

These are better defined in the Transition's WD, not in the Animation's.

Steps() Example with Transition

Why steps and not GIFs?

The Bézier Curve

Timing Animations

The Bézier Curve

Progress over time

The Bézier Curve

The Bézier Curve by Lea Verou

Physics The Bézier Curve

Physics of Motion

Physics

Concepts

  1. Speed
  2. Acceleration
  3. Gravity Acceleration
  4. Free Fall

Speed

The rate of change in an object position, in which it covers distance.
Length divided by time (km/h | mi/h | m/s)
Approximate Conversion Table
km/h mi/h m/s
20 12 6
40 25 11
60 37 17
80 50 22
100 62 28

Speed

Speed

Distance from Buenos Aires to São Paulo is 1700 km, Boings can travel up to 950km/h.
That flight should have taken less than 12 hours.

950km ----------------------- 1 hour
1700km ------------------- 1.8 hours

Speed

But it took 14 hours, that means that the Boing travelled at 790km/h.

950km
790km ----------------------- 1 hour
1700km ------------------- 2.2 hours

Average Speed

Acceleration

Acceleration

Acceleration

Acceleration = Change in Speed 10 m/s = 10 m/s2
Time interval 1s
Acceleration = Change in Speed 350 m/s = 87.5 m/s2
Time interval 4s
Fuck Gravity, I'm a lamb

Gravity
&
Free Fall

The Gravity of Earth

Denoted by "g", refers to the acceleration that the Earth imparts to objects, the speed of an object falling freely near the Earth's surface will increase by 10 metres per second, every second.

Ok, that's a lie

Gravity acceleration (g) is actually something like 9.80665 m/s2

The Gravity of Earth

The Power of Gravity
Seconds Speed
0s 0 m/s
1s 10 m/s
2s 20 m/s
3s 30 m/s
4s 40 m/s
5s 50 m/s
6s 60 m/s
7s 70 m/s
8s 80 m/s
9s 90 m/s
10s 100 m/s

Gravity acceleration

Gravity acceleration

Linear function

Gravity acceleration

If g = 10 m/s2, does X fall 30 meters in 3 seconds?

No.

If g = 10 m/s2, X falls only 45 meters in 3 seconds.

Averages again

Distance = 1/2 . g . t2
Distance = 1/2 . (10 m/s2) . (3s)2
Distance = 1/2 . (10 m/s2) . 9s2
Distance = 1/2 . 90m
Distance = 45m
What?!

Gravity

Distance
Average Speed Seconds Distance
5 m/s 1s 5m
10 m/s 2s 20m
15 m/s 3s 45m
20 m/s 4s 80m
25 m/s 5s 125m
30 m/s 6s 180m
35 m/s 7s 245m
40 m/s 8s 320m
45 m/s 9s 405m
50 m/s 10s 500m

Free fall -> Distance covered

The longer it falls, the fastest.

Gravity acceleration

Ease-in function

Free fall

Free fall

Galileo Pisa Tower

Galileo at the Pisa tower

Free fall

Galileo throws pizza and watermelon at the Pisa Tower

Galileo at the Pisa tower with food

Free fall

Free fall

Both fell at the same time.

Newton

And then Newton arrived

"Hey! Maybe they don't fall at the same time." - Mr. Newton

Newton

And then Newton arrived

"We need a higher place." - Mr. Newton

So he went to the Burj Khalifa

Newton at the Burj Khalifa

And threw a Watermelon and a Pizza

Newton at the Burj Khalifa

Longer Free fall

The Watermelon was first.

Ok, I made it all up.

... But ...

The Elephant and the Feather

The Elephant and the Feather

The Elephant and the Feather by physicsclassroom.com

The Elephant and the Feather

The Elephant and the Feather

An object free falling accelerates, but eventually the air resistance becomes so great that it ceases to accelerate and continues its fall with a constant velocity. This constant velocity is known as the "terminal velocity".
The Feather will reach the terminal velocity first, in an early stage of its fall.

Let's apply those physics to Web Design!

Frames with linear easing

A set of 8 frames

Let's turn it 90 degrees

And create a free fall effect.

Frames with linear easing

A set of 8 frames

Emulate free-fall

Emulate free-fall

Cubic Bézier

Frames Vertical

A set of 8 frames
<- Animation Linear
A set of 8 frames
Show Animation Easing ->

Add Newton's 3rd Law

Action & Reaction

Newton's 3rd Law

"For each and every action there is an equal and opposite reaction."

Squash and Stretch

For a sense of weight and flexibility.

Newton's 3rd Law

+ 3rd Newton's Law

A set of 8 frames

5 Predefined Timing-Functions

Ease (default) / Ease-in / Ease-out / Ease-in-out / Linear

The Bézier Curve

The Bézier Curve by Lea Verou

But there's more to it...

Buzz Lightyear

With the whole cubic-bezier() World!!

Bézier Curves

Bézier Curve in Ps and Ai

The Bézier Curve

Cubic Bézier explanation

The Bézier Curve

Cubic Bézier explanation

The Bézier Curve

Cubic Bézier explanation

The Bézier Curve

Cubic Bézier explanation

The Bézier Curve

Cubic Bézier explanation

Linear

Cubic Bézier explanation

Linear

Cubic Bézier explanation

Linear

Let's look at examples!

1. Normal

1. Normal

Cubic Bézier example

1. Normal

The Bézier Curve, Rules

Both X values must be between 0 and 1.

The Bézier Curve, Rules

Both Y values can be out of range and be either positive or negative.

2. One value out of range

Bounce!

2. One value out of range

Cubic Bézier example

2. One value out of range

2. One value out of range

3. Two values out of range

3. Two values out of range

Cubic Bézier example

3. Two values out of range

4. Negative values

Goes back before going forth!

4. Negative values

Cubic Bézier example

4. Negative values

5. Positive out of range + Negative

5. Positive out of range + Negative

Cubic Bézier example

5. Positive out of range + Negative

5. Positive out of range + Negative

Goes back before going forth!

5. Positive out of range + Negative

Cubic Bézier example

5. Positive out of range + Negative

Recap

Exaggerate

For funnier and more engaging experiences

Recap

Animation over reacts

Recap

Animation over reacts

Recap

Animation over reacts

Obrigada!

/