# María Evangelina Ferreira

## Hello!

• Web Designer
• Professor of Web Designers
• Some Web Marketing stuff

# This is a talk aboutTiming-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

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

# Each Frame is a part of the animation

## Working with 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; } } ```

## More Keyframes

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

# Chronophotography

## Steps Function, Animation pioneers

• Jules Marey
• Eadweard Muybridge

## Jules Marey

Known for researching body motion

## Eadweard Muybride

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

## Steps() Example

12 images. 5000px wide, 300px high. Each image measures 415px/300px.

## Timing-functions belong in Transitions

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

## 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

# Physics of Motion

• Galileo
• Newton

## 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

Distance from Buenos Aires to Melbourne is 11.000 km, Boings can travel up to 950km/h.
That flight should have taken less than 12 hours.

950km ----------------------- 1 hour
11.000km ------------------- 11.6 hours

## Speed

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

950km
790km ----------------------- 1 hour
11.000km ------------------- 13.9 hours

Average Speed

# 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

# 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

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

## 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.

# Free fall

## 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

## Longer Free fall

The Watermelon was first.

... 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 turn it 90 degrees

And create a free fall effect.

## 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.

## 5 Predefined Timing-Functions

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

## 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.

Bounce!

## 4. Negative values

Goes back before going forth!

## 5. Positive out of range + Negative

Goes back before going forth!

## 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

/