Advanced Timing & Easing for Web Animations with Tumult Hype

This article was sponsored by Tumult. Thank you for supporting the partners who make SitePoint possible.

Animation can roughly be defined as showing successive images or frames to give the illusion of smooth changes. Instead of producing every frame by hand, modern web animation tools like Tumult Hype let an animator create keyframes (generally start and stop points) and the computer dynamically fills in all the inbetween frames. How the computer decides to generate these frames can affect a viewer’s attention and emotional connection. This article explores a critical piece of generated animations, the Timing Function, and how to make best use of Tumult Hype’s advanced timing function editor for your animations.

Before reading, the first step is to download Tumult Hype. The trial is fully functional for 14 days. Tumult Hype has two flavor modes: Standard and Professional. For making custom timing functions (and following along with this article!), you’ll want to use Hype Professional.

Linear and Easing Timing Functions

Let’s say you want to animate a box moving across the screen. Over the course of two seconds you will have it move 300 pixels to the left. In generating an animation, the computer needs to determine the position of the box in time, and this is the role of the timing function. The most basic of these is linear interpolation, which divides evenly the distance by the number of frames. Thus a 30 frames-per-second animation would have each step move the box 5 pixels, as 300px / (2s * 30fps) = 5px. This successfully creates an animation:

To be subjective, this animation is bland! It moves without any natural physicality or weight. A viewer’s eyes must catch up to the speed the box is moving and then will likely overshoot their gaze when the animation abruptly ends. The most common solution is to apply a basic acceleration and deceleration to the box. This timing function is called Ease In Out:

Ease In Out

This looks better, and is the most common choice for animations. It is the default timing function in Tumult Hype and most other animation tools for good reason.

Representation of Timing Functions

To be more precise, a timing function inputs the value of time (x) and outputs a value of the animated property (y). Recalling back to middle school algebra, f(x) = y-style functions are a form that can be represented on a 2D graph. The basic linear timing function looks as one might expect, a line:

Linear Timing Function graph

Ease In Out is a gentle curve which shows how it will start and end at slower speeds:

Ease In Out graph

This timing function is created with the mathematics of a cubic Bézier curve. By changing the control points affecting curvature, different acceleration and decelerations can be achieved:

Easings graphs

The property values can even dip below the minimum value or above the maximum value, creating anticipation and overshoot timing functions:

Reverse Back graphBack graph

Tumult Hype offers more power yet: several bézier curves can be combined to form multi-curve paths. These can be used for a variety of effects such as bouncing or elasticity:

Bounce graphElastic graph

General Reasoning for Focusing on Timing Functions in Your Animations

Nature does not move mechanically like the linear timing function above. Timing functions like easing therefore serve a critical role in humanizing the elements you are animating. This helps present information cleanly and clearly. It directs focus.

Good timing helps give meaning to animations. It turns lifeless shapes into reality. Some can help convey emotion which is critical to branding. Other timings can entertain and engage.

The movement of “inanimate” objects is governed more by physics. “Animate” objects are governed by their own thoughts and emotions. Both styles can be modeled with timing functions.

Continue reading %Advanced Timing & Easing for Web Animations with Tumult Hype%

Powered by WPeMatico