Reveal Path (Trim path)
Last updated
Last updated
The reveal path property (also known as trim path) enables you to determine how much of your layer is 'revealed' or 'trimmed' off.
This is especially useful when used on a layer with a stroke to create fluid line animations, but can also be used on layers without strokes to create a cut-off effect.
The Reveal path property has three properties you can set, the 'sweep start', 'sweep end' and 'offset'
The sweep start trims (or hides) the shape in a clockwise motion ↻ (to the right) from the top-centre of the shape (if no offset is applied).
It ranges between 0% and 100%, and the higher its value, the more of the shape is trimmed in a clockwise direction.
A simple mental model is the closer to 100% this value is, the more the shape is hidden clockwise.
The sweep end trims (or hides) the shape in an anticlockwise motion ↺ (to the left) from the top-centre of the shape (if no offset is applied).
It starts at 100% and the lower its value, the more of the shape is trimmed in an anticlockwise direction.
A simple mental model is the closer to 100% this value is, the more the shape is revealed anti-clockwise.
The offset moves where the starting point for the trim is.
When offset is 0%, the shape is hidden/trimmed starting from the top-centre when sweep start or sweep end is changed.
When offset is a positive number, the starting point for the trim is moved clockwise ↻ by the given percentage.
When offset is a negative number, the starting point of the trim is moved anti-clockwise ↺/reversed by the given percentage.
