Animation
This guide explains the core animation features available in Phase. It covers how to work with Animate Mode, Keyframes, Animation Presets, Trim Path, Motion Paths, and Easing to build interactive and timed visual behaviors within your designs.
Create Animation Response
To create an animation, start by setting up an Action. Actions define what should happen and when. Find out more about Actions here.
After the trigger is set, you can create a response by adjusting the element directly on the canvas or by editing properties in the Properties Panel. For more detailed control, expand the Compact Action Panel and add additional keyframes.
Full Action Panel / Compact Action Panel
When you create an action, a Compact Action Panel appears by default. This provides a streamlined view for quick property changes and duration adjustments. To open the Full Action Panel, click the expand button located on the left side of the timeline bar. This reveals the full timeline view for detailed animation editing.
In the Full Action Panel, you’ll see:
- A white vertical line called the playhead, which marks the current time. You can drag it or input a specific time in the field to the left.
- Keyframe tracks for every animated element and property, visible as horizontal lanes.
- Diamond markers on the tracks, representing keyframes where property changes occur.
Each layer in the timeline can be expanded to reveal individual animated properties. This allows you to inspect and adjust keyframes at a detailed level for each animation.
When starting from scratch, the timeline will be empty except for the playhead. Keyframes appear only after changes are made to an element's properties.
Use the timeline to control animation timing, inspect layers, and fine-tune keyframes efficiently.
To view and work with keyframes, click the timeline icon in the action bar to open the timeline panel. This expands the timeline and shows all relevant animation tracks.
The timeline panel displays:
- A vertical playhead representing the current time.
- Keyframe tracks for each animated element and property.
- Markers indicating keyframe positions.
You can:
- Drag the playhead to scrub through time.
- Add or delete keyframes directly.
- Expand layers to view property-specific animations.
- Zoom in/out for finer control.
Keyframes
Creating Keyframes
To create a keyframe, you must first specify the point in time when a change should happen. There are two ways to do this:
- You can adjust the Duration of the animation to define its overall length, then apply your changes within that time range.
- Alternatively, open the Full Action Panel and move the playhead to the exact moment you want to modify a property. This allows for precise timing and layering of animations.
Keep in mind that the Duration setting determines how long the animation will run in total. The placement of your keyframes within that time defines when specific changes occur.
Method A: Changing Properties
- Select an element.
- Adjust its properties directly on the canvas or in the Properties Panel.
- A keyframe is automatically added at the current playhead position.
Method B: Manually Adding Keyframes
- Hover over a specific property in the timeline panel.
- When the diamond icon appears, click it to insert a keyframe at the current playhead time.
Adjusting Keyframes
After have created a keyframe, it can modified in a few ways:
- Drag the keyframe to move it along the timeline, changing the timing of the animation.
- Change any parameters at the time of the keyframe to update the animation at that time.
- Press ⌫ Backspace or Delete to remove keyframes.
- Select a keyframe, change to a later time, and press Command ⌘ C or Ctrl C to copy it.
When right-click a keyframe, Phase will present the following options:
- Duplicate To Current Time: Makes a copy of the keyframe at the current time. Duplicating only has an effect if the playhead is set to a different time than the keyframe is currently on. For example: to create a new keyframe based on one at 1 second, set the time to a little later (like 1.2 seconds) before duplicating. Pressing Command ⌘ D or Ctrl D will duplicate keyframes as well.
- Reset to Initial Value: Switches the selected keyframe’s property to be the same as the value when Animate Mode is turned off. This is useful for creating looping animations.
- Delete Keyframe: Removes the keyframe. The animation is recalculated as if it is not there, including connecting keyframes on either side of the removed one.
On the right side of the timeline, by clicking on a keyframe the Easing settings can be viewed. These will allow the acceleration and smoothness of the animation to be adjusted.
Interpolation
Think of keyframes as snapshots of how your design looks at specific moments. You set these key points, and Phase does the magic of figuring out all the in-between states, that's what we call interpolation
Here we have a simple animation. At 0 seconds, there is no keyframe. The default design of a yellow circle is used then. Then at the 1 second mark, the animation is set to be a red diamond. The animation is also set to rotate 180 degrees at that point.
 0 seconds |  0.5 seconds |  1 second |
In between 0 and 1 seconds, there is no keyframe. However, Phase estimates the border position and the fill colors between every point. So looking at the shape in between 0 seconds and 1 second, it will appear as some form of a rounded square with an orange fill.
Animation Presets
Animation Preset is a ready-made animation effect that can be quickly applied to our elements. Instead of creating an animation from scratch, we can choose from various preset options like fade, move, scale, spin, and trim, making it easy to add animations without too much effort.
How to Apply Animation Presets
Animation Presets are available only in animate mode. To apply a preset:
- Select an element Click on the “Preset” option in the Properties Panel.
- Choose the desired preset and apply it to the element.
Types of Animation Presets
We offer 10 distinct Animation Presets, each preset provides an unique animation effect for our elements:
- Fade In: Gradually makes an element visible, transitioning from transparent to opaque.
- Fade Out: Gradually makes an element disappear, transitioning from opaque to transparent.
- Move In: Animates an element as it moves into view from an off-screen position.
- Move Out: Animates an element as it moves out of view, moving off-screen.
- Scale In: Scales an element up as it becomes visible, increasing its size from smaller or invisible to its final size.
- Scale Out: Scales an element down as it becomes invisible, reducing its size until it disappears.
- Spin In: Spins an element into view, rotating from an off-screen position to its final visible state.
- Spin Out: Spins an element out of view, rotating until it is no longer visible.
- Trim In: Animates a path as it draws itself onto the screen, gradually revealing the path's shape.
- Trim Out: Animates a path as it erases itself, gradually removing the path from view.
Adjusting the Animation Presets
Adjust Preset Details
Open the preset details dialogue.
- Use the delay settings to set the amount of time before the animation begins.
Duration
- Go to the timeline
- Locate the element track segment.
- Drag the edges of the track segment to adjust the duration of the animation preset.
Trim Path
Trim Path is an effective technique for adding a deeper sense of movement to motion graphics and vector-based animations. It allows us to animate the trimming or drawing of a stroke along a path over time, creating the illusion of movement or transformation. This technique enables specific portions of a shape or line to be revealed or hidden, resulting in dynamic visual effects.
Creating Trim Paths
- Draw the shape that Trim Path effect should be applied to. This could be a simple rectangle, circle, or a custom vector path.
- Click on the symbol next to Effects in the Properties Panel to access the Trim Path feature. This action will reveal the Trim Path tool box.
- Move the playhead to the desired start point. Normally, this would be 0s.
- Set the start and end of the Trim Path to 100%.
- Move the playhead to the desired end point.
- Set the start of the Trim Path to 0% and the end to 100%. At a trim of 0%, the line will become visible.
- Press play.
✍️
Note
Be cautious when using fill with Trim Path animations, especially in complex ones or with certain shapes. Depending on the design or animation, unexpected visual effects may occur.
For example, if the fill is not properly aligned with the Trim Path animation, undesired changes in color or inconsistencies in the appearance of the shape could happen. Additionally, if the Trim Path animation involves erasing the path, the fill color might be erased along with the path, leading to unintended disappearing effects.
Always thoroughly test any animation to ensure that the fill behaves as expected throughout the Trim Path animation.
By default, shapes start at 0% and end at 100%, but these values can be adjusted to change the positions of the Start and End points of the trim. Setting both points at 100% will completely trim the path, making it invisible on the canvas. On the other hand, setting both points at 0% will render the line invisible.
Offset
In our earlier steps, we were able to create a Pac-Man-like animation by configuring the offset and keyframes. This allowed us to create intricate repeating patterns, perfect for dynamic effects like opening and closing motions. We started with an offset of 20%, a start point of 10%, and kept the end point at 100%. Then, for each successive keyframe, we animated from 20% to 100%, repeating this sequence multiple times without changing the offset value.
For the uninitiated, the Offset property in a Trim Path refers to the point along the path where the animation starts. It allows you to control the starting position of the trim animation along the path. The Trim Path animation begins at this offset point and then progresses along the path as the animation proceeds.
Setting the offset to 0% makes the trim path start right at the beginning of the shape. In simpler terms, the visible part of the path kicks off from the shape's starting point. When the offset value is increased, it moves the starting point of the trim along the path. So, if the offset is set to 50%, the trim will begin halfway along the path, showing only the second half of the shape.
Trim Path Modes
Trim Path modes are options or settings that control how a Trim Path animation behaves when revealing or erasing a path over time. These modes determine how the starting and ending points of the animation change as it progresses.
To apply a Trim Path, group all the shapes into a container and apply the Trim Path to the container. To switch between modes, use the drop down menu.
There are two main Trim Path modes:
Simultaneously
In this mode, both the start and end points of the Trim Path animation move together along the path. As the animation advances, the visible portion of the path both begins and ends at different positions, creating a synchronized reveal or erase effect. This mode is used when we want the animation to uniformly uncover or erase the entire path at the same rate.
Individually
In this mode, we have separate control over the starting and ending points of the Trim Path animation. As the animation progresses, we can independently adjust where the path starts and where it ends. This provides greater flexibility and creativity in how we reveal or erase the path. We can create effects like drawing the path from one side to another or erasing it in a unique pattern.
Motion Paths
Motion paths define the trajectory an element follows in an animation. They can be straight, curved, or custom-shaped, and are essential for creating dynamic, visually engaging motion graphics.
Key Components
- Motion Path Initial Point: Starting point of the element's movement.
- Motion Path Point: Key points along the path.
- Motion Path Curve Control: Adjusts curvature between points.
- Motion Path Segment: The space between two motion path points.
Creating a Motion Path
- Move the playhead on the timeline to set the initial position. Select and reposition the element to generate the motion path.
- Position keyframes automatically include both x and y values.
Curving a Motion Path
- Select a path point to reveal shape options:
- Straight: No curve, sharp angles.
- Mirrored: Symmetrical curve with equal handles.
- Asymmetric: Unequal handles for varied curves.
- Independent: Full control over both handles individually.
- Adjust path curves using the curve control handles.
Orientation
Use Auto Orientation to align the element’s direction with the motion path.
Timing, Duration & Easing
- Time: Adjust speed segment-by-segment using keyframes.
- Duration: Paths can extend beyond timeline duration, but excess movement won’t render.
- Easing: Can be applied to individual path segments for smoother motion.
Example: Bouncing Ball
- Use squash and stretch techniques for realism.
- Ball weight affects bounce speed and height.
- Use curve adjustments to fine-tune bounce dynamics.
Easing
Easing controls how animations transition between keyframes, affecting their smoothness, speed, and style. Phase supports a variety of preset easing types and customizable Bezier curves to help designers fine-tune motion behavior.
How to Use Easing
- Select a keyframe.
- Open the Easing context menu at the bottom of the Properties Panel.
- Choose a preset or manually edit the curve handles to create custom easing.
Easing Panel Features
- Visual Curve Editor: Lets you manipulate curve handles directly.
- Type Menu: Offers presets like Ease In, Ease Out, etc.
- Custom Mode: Triggered when handles are manually adjusted.
- Bezier Coordinates: Displayed as [Bx, By, Tx, Ty] and can be edited for precision.
Curve Grid
- Graphical interface with two adjustable handlebars.
- Longer handles = more dramatic easing.
- Shorter handles = more subtle easing.
Preset Easing Types
Basic Easing
- Step: Jumps instantly to the next keyframe value.
- Linear: Constant speed; no acceleration/deceleration.
- Ease In: Starts slow, ends fast.
- Ease Out: Starts fast, ends slow.
- Ease In Out: Smooth start and end.
Back Easing
- Ease In Back / Out Back / In Out Back: Adds intentional overshoot at the beginning/end/both, creating a “recoil” feel.
Elastic & Bounce
Ease In/Out Elastic: Springy motion that overshoots then settles.
Ease In/Out Bounce: Mimics a gravity-affected bounce.
Hop Easing
Hop In / Out / In Out: Adds bounce for a playful, lively entrance or exit.
Understanding Bézier Curves
- Each easing curve is based on Bézier math, controlled by handlebars attached to keyframes.
- Start and end points are fixed at (0,0) and (1,1).
- Handlebars control the curvature, with x-values locked between 0–1, and y-values that can go beyond for extreme effects.
- Higher values = stronger curve bend, but with diminishing returns.
Start Prototyping
Get Started with Our Free, Web-Based Platform.
© Phase Software GmbH 2025