✍️
Note
Heads up! Phase gets little updates and improvements all the time. Our tutorials might be a tad different from the current app.
Animation
Bring life to designs through the simple yet powerful animation tools in Phase! All that’s needed is to jump into Animate Mode, move to a point in the timeline, and edit. Phase will do the rest.
Animate Mode
Switching To Animate Mode
Press the Animate button
at the bottom of the screen to get started. Alternatively, turn Animate Mode on and off by pressing button.
at the bottom of the screen to get started. Alternatively, turn Animate Mode on and off by pressing A
In Animate Mode, some additional icons appear next to the Animate slider:
- Play / Pause
: The basic control for video playback. Or use for start and stop.Space - Loop
: The animation will restart when it reaches its end. - Playback speed
: Click this to cycle between x0.25, x0.5, x1.0, x1.25, x1.5, and x2.0.
While the icons are important, the bigger change in Animate Mode is that the Timeline panel appears at the bottom of your screen. The typical Phase animation workflow uses the Timeline extensively, so here is a basic overview.
Timeline Interface
When creating an animation from scratch, the timeline will be empty with the exception of a white vertical line. That's the playhead, the time marker for the animation. It can be dragged around, or moved to a fixed time by typing in the field above the leftmost part of the timeline.
On the other hand, when a Lottie is imported a number of diamond shapes will appear on the timeline. These are keyframes, the points when layers change in the animation. If a layer has any keyframes set, it appears in a new layer panel at the left side of the timeline.
Each keyframe represents a point at which at least one property has been adjusted. Nested within each layer are all the properties that have been changed. Layers can be expanded to reveal a listing of all the properties that have keyframes.
✍️
Note
If no keyframes are at 0 seconds, then the properties at that time are all the same as when Animate Mode is turned off.
The majority of the work in creating an animation is setting keyframes, so let's go into that now.
Creating Keyframes
Adding keyframes in Phase is as intuitive as building the static design. The only difference is that before making any change, the playhead needs to be moved to the intended time when that change should happen.
There are two methods to change keyframes, listed below.
Method A: Creating Keyframes by Changing Properties
Automatically Creating Keyframes By Adjusting Position of Elements
- Move the playhead to a point in the timeline.
- Select an element, and either move it, or change any of its properties.
- Phase automatically creates a keyframe of the new settings.
Method A is the same as redesigning over time. It does not require many clicks, so it may be easier to use. However, there are times when creating keyframes manually will be required.
Method B: Adding Keyframes Manually
Adding keyframes through manual input
- Move the playhead to a point in the timeline.
- Hover over any property. A diamond keyframe indicator appears.
- Click on the icon.
- Phase creates a keyframe at that time, even if no properties have been changed.
Method B is most useful when delaying an animation. For example, if an animation should remain the same from 0 seconds until a later point, create a keyframe that maintains that property over time. This can act as a new first keyframe, even if it's not at the very beginning of the animation.
Keyframe Adjustments
Snap To Keyframe
Whenever we click a keyframe, the playhead will snap to it automatically. There are other ways we can select and modify our keyframes:
- 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 to remove keyframes.⌫ BackspaceorDelete
- Select a keyframe, change to a later time, and press orCommand ⌘Cto copy it.CtrlC
When right-clicking 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 orCommand ⌘Dwill duplicate keyframes as well.CtrlD
- 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
Shape Interpolation Over 2 Seconds
When animating, keyframes can be set at various intervals to decide how the animation will look at those points in time. In between each keyframe, Phase automatically calculates the animation through a process called 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.
📖
Read More
Phase is able to create elaborate Interpolations that can gradually accelerate or decelerate. This process is called Easing, which we have a dedicated article about if you want to learn more.
Start Animating
Get Started with Our Free, Web-Based Platform.
Learn
© Phase Software GmbH 2024