Newton meets CSS

María Evangelina Ferreira

Hello!

Web Designer
Professor of Web Designers
Some Web Marketing stuff

This is a talk about
Timing-Functions

Web Design & Timing Animations

Steps()
Linear
Ease
Ease-in
Ease-out
Ease-in-out
The Bézier Curve

Web Design & Timing Animations

Steps()
The Bézier Curve
- Linear
- Ease
- Ease-in
- Ease-out
- Ease-in-out
- Cubic-Bézier expanded

Itinerary

Animation
- Frames
- Rhythm
- Keyframes
Steps()
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

The disposal of middle frames indicates rhythm.

@keyframes in CSS

@keyframes

We create the animation, providing the keyframes
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
Eadweard Muybridge

Jules Marey

Known for researching body motion

Jules Marey

Eadweard Muybride

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

Eadweard Muybride

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?

More than 256 colors
Better way to handle opacity
Better gradients
All in all, better quality
You have to put the images together

The Bézier Curve

Timing Animations

~~Steps()~~
The Bézier Curve
- Linear
- Ease
- Ease-in
- Ease-out
- Ease-in-out
- The Bézier curve expanded

The Bézier Curve

Progress over time

The Bézier Curve

Physics ☞ The Bézier Curve

Physics of Motion

Physics

Galileo
Newton

Concepts

Speed
Acceleration
Gravity Acceleration
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

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 =	Change in Speed	10 m/s	= 10 m/s²
	Time interval	1s

Acceleration =	Change in Speed	350 m/s	= 87.5 m/s²
	Time interval	4s

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/s²

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

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

No.

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

Averages again

Distance	=	1/2	.	g	.	t²
Distance	=	1/2	.	(10 m/s²)	.	(3s)²
Distance	=	1/2	.	(10 m/s²)	.	9s²
Distance	=	1/2	.	90m
Distance	=	45m

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

Free fall

Galileo Pisa Tower

Free fall

Galileo throws pizza and watermelon at the Pisa Tower

Free fall

Pizza
Watermelon
Both at the same time

Free fall

Both fell at the same time.

And then Newton arrived

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

And then Newton arrived

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

So he went to the Burj Khalifa

And threw a Watermelon and a Pizza

Longer Free fall

The Watermelon was first.

Ok, I made it all up.

... But ...

The Elephant and the Feather

1st & 2nd Newton's Law
Air Resistance
Terminal velocity

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

Let's turn it 90 degrees

And create a free fall effect.

Frames with linear easing

Emulate free-fall

Frames Vertical

<- Animation Linear

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.

+ 3rd Newton's Law

5 Predefined Timing-Functions

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

The Bézier Curve

But there's more to it...

With the whole cubic-bezier() World!!

Bézier Curves

The Bézier Curve

The Bézier Curve

Linear

Let's look at examples!

1. Normal

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

3. Two values out of range

4. Negative values

Goes back before going forth!

4. Negative values

5. Positive out of range + Negative

Goes back before going forth!

5. Positive out of range + Negative

Recap

Steps() before GIFs
Transitions are totally OK with steps()
Apply physics whenever facing on Earth animations
Create endless possibilities with cubic-bezier
Animation, not only the Web
And remember...

Exaggerate

For funnier and more engaging experiences

Recap

Newton meets CSS

María Evangelina Ferreira

Hello!

This is a talk aboutTiming-Functions

Web Design & Timing Animations

Web Design & Timing Animations

Itinerary

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

@keyframes in CSS

@keyframes

Basic Animation Example

Invisibility cloak

More Keyframes

Harry goes to party

Timing-functions

Steps Function

Steps() Example

Chronophotography

Steps Function, Animation pioneers

Jules Marey

Jules Marey

Jules Marey

Eadweard Muybride

Eadweard Muybride

Eadweard Muybride

Eadweard Muybride

Eadweard Muybride

Steps() Example

Steps() Example

Steps() Example

Timing-functions belong in Transitions

Steps() Example with Transition

Why steps and not GIFs?

The Bézier Curve

Timing Animations

The Bézier Curve

The Bézier Curve

Physics ☞ The Bézier Curve

Physics of Motion

Physics

Concepts

Speed

Speed

Speed

Speed

Acceleration

Acceleration

Acceleration

Gravity &Free Fall

The Gravity of Earth

Ok, that's a lie

The Gravity of Earth

Gravity acceleration

Gravity acceleration

Gravity acceleration

No.

Averages again

Gravity

Free fall -> Distance covered

Gravity acceleration

Free fall

Free fall

Free fall

Free fall

Free fall

And then Newton arrived

And then Newton arrived

So he went to the Burj Khalifa

And threw a Watermelon and a Pizza

Longer Free fall

Ok, I made it all up.

The Elephant and the Feather

The Elephant and the Feather

The Elephant and the Feather

The Elephant and the Feather

This is a talk about
Timing-Functions

Gravity
&
Free Fall