✍️
Note
Heads up! Phase gets little updates and improvements all the time. Our tutorials might be a tad different from the current app.
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
Opening The Trim Path Menu
- Draw the shape that the 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
Creating Pac-Man Animation Using 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 us 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
Showcasing The Difference Between 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 and Individually.
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 you 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.
Start Animating
Get Started with Our Free, Web-Based Platform.
Learn
© Phase Software GmbH 2024