Tumult Hype Documentation — Animations

Tumult Hype uses a powerful keyframe-based animation system to give elements motion and transitions. Its recording functionality makes building animations a snap.

Animation User Interface

  1. Animation controls (left-to-right): Jump to Start, Previous Frame, Next Frame, Play/Pause, Loop
  2. Current time indicator; matches time cursor
  3. Record Button
  4. Timeline Selector Popup Menu
  5. Time cursor
  6. Animatable Property Popup Menu
  7. Timing Function Popup Menu
  8. Add Keyframe Buttons
  9. Time scale zoom slider
  10. Timeline View with Animation
  11. Timeline Action
  12. Motion Path Toggle Button

Keyframes

Keyframes specify the value for a property at a specific point in time, and animations are composed of two keyframes which define the starting and ending values of a property’s animation.


Animation Keyframes

In traditional hand-drawn animation, creating frames is split between two groups of people: keyframe artists and in-betweeners. The keyframe artists would draw the most significant frames, usually where shifts in action would occur. If they were animating a bouncing ball, they might draw two frames: the top of the bounce and when the ball hits the ground. The in-betweener would do the more tedious work of drawing the intermediate frames to bring the ball to life.

You are the keyframe artist when using Tumult Hype. You can specify keyframes for element properties on the timeline and Tumult Hype will automatically generate the in-between frames for you.

Recording

Recording is an intuitive way to automatically generate keyframes when creating animations. Simply click the Record button, move the time cursor, and manipulate elements on the scene or change properties in the inspector. In response to your actions, Tumult Hype creates the necessary keyframes on the current timeline. Recording eliminates the need to manually insert keyframes.

Create an animation of an element moving over three seconds by following these steps:

  1. Click the Record button to turn on recording
  2. Select an element to animate
  3. Move the time cursor to the right and stop at the 3 second tick mark
  4. Drag an element to a new location, or resize an element.

Notice a red animation bar was created on the timeline. The red animation bar may be moved to change the start and end time of the animation. Click and drag the beginning or ending point of this bar to adjust an animations' timing.

The Capo

The Capo pairs with Tumult Hype’s recording feature to let you quickly build animations which start and end at arbitrary times without manually inserting keyframes. With the Record button on, you’ll see a small tab — the Capo — appear at the left edge of the time scale area.


Capo Tab

The position of the Capo sets the starting time for your animation. The Capo and time cursor are typically moved independently from each other, and you can adjust the position of both simultaneously by holding the control button while dragging either.


An Animation Created Using Recording and the Capo

Recording and the Capo are incredibly powerful animation tools. With them in your arsenal, you’ll rarely need to manually insert keyframes for individual properties.

Manually Editing Keyframes

Adding Keyframes

Keyframes operate on specific properties. An animation requires two keyframes: a starting keyframe and an ending keyframe. The in-between frames are automatically formed and will smoothly transition the property value from the start to the end.

To add a starting keyframe, select an element in the scene editor. Your selected element will also appear highlighted in the element list below the scene area. In the property list below the element, you can select a specific property that you want to animate. For example, if you wanted an object to fade in, you would select the opacity property. Next, you can move the time cursor to where you want the animation to begin. Click the Add Keyframe button. This will visibly place a keyframe on the timeline. At this point, you’ll set the value of the property you want to animate. For the fade in, you would go to the Element inspector and set the opacity value to 0%.

To add the ending keyframe, move the time cursor to the point on the timeline you’d like the animation to end at. Click the Add Keyframe button again to create a second keyframe on the timeline. Finally, you’ll want to set the property to its ending value. To complete the fade in, set the opacity to 100%. A bar between the keyframes will appear; this indicates the property is animating.


Per-Property Add Keyframe Buttons

By default, clicking a property’s Add Keyframe button adds a keyframe for the associated property at the time cursor’s current time. Option-clicking the Add Keyframe button adds keyframes for all visible properties in the properties list.

Setting Keyframes on Any Property

By default, when you click on an element in the element list the only properties that are shown in the properties list are the opacity, origin, and size. These are the properties you’ll likely be manipulating, but Tumult Hype is capable of animating most properties you can set in the inspector. To manually add keyframes for other properties, you’ll need to add them to the currently selected element’s property list. To do this, click on the Properties pop-down menu and select which property you’d like to animate. Now this property can be selected for adding keyframes.


Animation Keyframes

If you are recording, Tumult Hype automatically adds properties to the properties list as you manipulate elements on the scene or change values in the inspector.

Modifying Properties

For manipulating properties with keyframes, there are two rules to note:

  1. If the time cursor is on a keyframe for a property and that property is manipulated through the inspector, the keyframe value itself will change.


    Time Cursor on Keyframe

  2. If the time cursor is not directly on a keyframe for a property that has keyframes, and the property is changed, then the keyframes will all be offset.


    Time Cursor off Keyframe

These rules are best illustrated by considering an example involving an animation of an element’s Origin (Left) property. The animation is defined by two keyframes:¬†one placed at the 1 second mark with a value of 10px, and a second at the 2 second mark with a value of 20px. With those keyframes, the animation will start at 1 second and, over a full second, will move the element to the right by 10 pixels until it reaches the ending keyframe’s value of 20px.

With this animation, placing the time cursor at either 1 second or 2 seconds will allow you to modify the value of those two Origin (Left) keyframes; any changes made to the element’s Origin (Left) value when the time cursor is over those keyframes will change the value of those keyframes and thus change the distance the element will move. Conversely, when the time cursor is at any other time on the timeline, changing the element’s Origin (Left) property will change the location of the element itself; the starting and ending points of the animation will change, but the actual animation itself is unchanged.

Manipulating Keyframes

Keyframes support most standard manipulations; multiple keyframes can be selected, dragged to move, copied, and pasted. While keyframes are represented by diamonds in the property area, the duration and span of animations are represented by the bars between keyframes. To the right of the elements are animation overview bars, which represent keyframes as white lines. These bars can be resized and dragged to adjust animations. They can also be multiply selected, copied and pasted, just as with keyframes.


Animation Overview Bar and Keyframe indicators

By default, the playhead, keyframes, and animations snap to second markers and other keyframes when dragged. Disable this behavior by deselecting the Animation > Snap to Seconds or Animation > Snap to Keyframes menu items.

Delete both keyframes and animations by drag selecting them in the timeline view and then pressing Delete. When adjacent keyframes are deleted, the animation between those keyframes is also deleted. Deleting an element-level animation overview bar will delete all associated property animations.

Copying and Pasting Animations

To duplicate an element and its animations, first select the element on the scene or in the element list, then select Edit > Copy, and finally select Edit > Paste with Animations. Keyframes and animations can also be copied from and pasted to the timeline.

Motion Paths

Elements can be animated along complex and arbitrary curves using motion paths.

Creating a Motion Path

A motion path is a curved animation between two or more points. Create a motion path by first creating a basic animation between two points.

  1. Click the Record button to turn on recording.
  2. Advance the time cursor to your animation’s desired ending time.
  3. Move the element to the desired ending location.
  4. Turn off recording by once again clicking the Record button.

Now that there’s an animation, convert the basic path to a motion path by first clicking on the animation’s path to select it for editing, and then clicking once again to add a motion path control point. Dragging the control point or the control handles alters the curve, and additional control points can be added anywhere on the path by clicking the path.


Creating a Motion Path

Motion paths unify Origin (Top) and Origin (Left) properties under one single Origin (Motion Path) property, because the motion path itself controls the top and left position of the element. As a result, Tumult Hype warns you if you attempt to convert a linear animation with different timing functions for Origin (Top) and Origin (Left), because the new motion path can only support one timing function.

Furthermore, converting an element to use motion paths will change all of that element’s animations on all timelines to use motion paths. To preserve standard animations in different timelines, create a copy of your element by selecting your element and choosing Edit > Copy and then choosing Edit > Paste with Animations.

By default, elements move along motion paths without rotating. When the ‘Rotation follows motion path’ option in the Metrics inspector is enabled, elements instead rotate so they’re always perpendicular with respect to their motion path with their right edge forward. If your right edge is not the "front" of the image you may need to rotate your element on the Z axis so that the correct edge is on the right side. For example if your object is moving from right to left you will likely need to rotate your image by 180 degrees.

Adjusting a Motion Path

  • Shape: To adjust a motion path’s curve, click once on the path and then click and drag any control point to change it’s location, or any control handles to change the nature of the curve.
  • Adding and Removing Control Points: Add control points by first selecting a path; once a path is selected, clicking anywhere on the path will add a control point. This cursor indicates a control point will be added when the path is clicked: .
    Any control point can be removed by clicking on the control point and then pressing Delete. Because the starting and ending control points define the element’s animation, those can only be deleted by deleting the animation itself as is described in the Manipulating Keyframes section.
  • Rotation: By default, elements move along motion paths without rotating. When the “Rotation follows motion path” option in the Metrics inspector is enabled, elements instead rotate so they’re always perpendicular with respect to their motion path.

For more precise control over Motion Paths, view available keyboard shortcuts.

Easing and Animation Timing Functions

By default, animations use the Ease In Ease Out timing function. Ease-in-out smooths the beginning and ending movements of an animation so that changes slowly accelerate and then decelerate. To change an animation’s easing, click the animation bar between any two keyframes, then choose a different timing function from the Easing menu on the right side of the Timeline view. You can also double-click any animation bar to reveal an animation pop-up which features the same Easing menu.

Tumult Hype supports the following animation timing functions:

  • Instant – The property jumps to the value of the ending keyframe, at the time of the ending keyframe.
  • Linear – Constant steady change between the starting and ending keyframe values.
  • Ease In – Constantly accelerates from the starting keyframe value towards the ending keyframe value.
  • Ease Out – Constantly decelerates from the starting keyframe value towards the ending keyframe value.
  • Ease In Ease Out (Default) – Accelerates change during first half of the animation; decelerates change during the second half.
  • Bounce – The property's quickly changes towards the ending keyframe’s value, then “bounces” off that value twice. Often used for creating natural vertical bouncing animations, by applying this timing function to an animation of an element’s Top property.

Animation Properties pop-up and Easing menu

Additional questions?

If you have any additional questions not covered here, please visit the animation support forum or ask us a question.