Design + Sketch App — Medium | Anima App

Timeline is a tool for animation design, right inside Sketch.
On this post we’ll explore easing functions, and the new easing controller.

This post is also relevant if you’re looking for CSS Animation Easing, these are the same functions (And for a good reason — Timeline will export code soon)

What is an Easing Function?

An easing function determines rate of change of a parameter over time.
In other words: How to change a value (for example position of layer) over time.

The above 4 easing functions are the most common functions and appear in CSS Animations, Swift animations, Unity, and other Languages or animation studios.

The Easing Curve Chart

Don’t panic, it’s actually pretty simple.

Time goes left to right: On the left time is 0, and on the right — the end, which is the duration of the animation.
Progress goes from bottom up: At the bottom is the original state, and at the top — 100% of the transition completed.

Ease In: Change Accelerates Over Time

On this sample chart, we can see that the change accelerates as time passes, and we’ll get an Ease-In effect.

Linear Easing

The linear function is the most basic one. I means constant speed of the change. You can find it on repeating animations, like a spinning loaders, or falling snow. On this sample — the laser beam moves lineary.

Linear: Constant Speed of the Change

Ease In Function

Ease-in function means a slow start and accelerated change.

Ease In: Change Accelerates Over Time

Ease Out Function

Ease-in function means a fast start and decelerated change.

Ease In: Change Decelerates Over Time

Ease In Out Function

Ease-in function means a slow start and ending, acceleration and decelerated in between.

Ease In: Change Accelerates, then Decelerates

Custom Curve

Using Timeline, or plain CSS, you can also determine the curve manually. Most common is a Cubic Bezier. Here’s how it looks on Timeline.

Get Started with Timeline

Download Timeline for Sketch, start with your design or use this tutorial.
Go to Timeline mode and start playing with the new animation curve tool.

Tutorial Sketch File

CSS Easing Functions

Doing Some CSS?
Timeline will export code soon.

Until then, you can use Launchpad to export your full design to HTML, and add animations with the easing functions we just saw.

More links: CSS animation syntax, Online tool to play with cubic curves.

Join the discussion on Facebook or Twitter.
❤️ Anima team

Animation Easing Functions Explained was originally published in Design + Sketch on Medium, where people are continuing the conversation by highlighting and responding to this story.