The timeline is a key component of many applications that deal with motion, such as multimedia editors. It captures how properties evolve through time. In order to change a property, you usually define the initial and final values, and the software will be in charge of computing all the in-between steps.

Following the cinema metaphor, Hype is able to generate every frame based on the few essential frames defined by the user--these are known as keyframes. For example, you can set an opacity to 0% initially and create a keyframe after half a second with the opacity at 100% in order to define a fade-in transition. The software will calculate all the intermediate frames needed for the animation.

The record button allows you to control when the new keyframes are created as you change properties. When you press the record button, you can just manipulate the objects of your prototype, and those changes will be captured in keyframes at the indicated point in time on the timeline.

In Hype, you can define multiple timelines. While the main timeline is played automatically, you have control of when any other timeline is played. Timelines are useful to define the different behaviors in your prototype. A timeline describes an animation that affects one or more properties of one or more layers. Making a panel appear, removing an element from a list, or zooming an image are some examples of animations you can define as timelines for your prototype.

In order to create different animations, you can define multiple timelines and switch between them. The player controls allow you to check that the animation works as expected.

When defining a transition, you can select different timing functions. This will allow you to adjust the pace at which a property changes in an animation:

• Instant: This represents a sudden change instead of one that is gradual.
• Linear: This involves change happening at a constant pace. Elements moving at a linear pace will keep the same speed without any acceleration or deceleration.
• Ease: These functions take into account friction at the beginning, end, or both. An ease in will apply the changes more slowly at the beginning, whereas an ease out function will decelerate at the end. As you can expect, an ease in out function considers friction at both points, initially accelerating and ending with deceleration. Ease functions produce more realistic movements than linear ones since objects in the real world require some acceleration to reach their intended speed. Hype provides different variants for the ease functions to adjust the prominence of the movements.
• Bounce: This represents a change that reaches the intended point but bounces back. The value will never exceed the intended one, but it will go back and forth to create a bouncing effect.
• Elastic: This is similar to bounce, but the intended value will exceed initially, going back and forth like a spring.
• Back: This motion also exceeds the intended value initially but reaches it gradually in a more controlled way, with no back and forth movement.

The elements that participate in the scene are represented as layers in a list. They can be grouped and arranged to control which one is displayed on top of another. Once a layer is selected, their properties are displayed on the timeline.