Lottielab Docs
  • Getting Started
    • Welcome to Lottielab
    • Tutorials
    • Templates and Examples
    • Design vs Animate mode
    • Keyboard Shortcuts
    • FAQ
  • File management
    • Dashboard UI Overview
    • Files
      • Create a file
      • Import a file
      • Duplicate a file
      • Export a file
      • Move a file
      • Share link to file
      • Rename a file
    • Teams
      • Create a team
      • Invite team members
      • Rename a team
    • Folders
      • Create a folder
      • Rename a folder
      • Delete a folder
  • Editor
    • Editor UI Overview
    • Tools
      • Selection Tools
      • Shape Tools
      • Pen tool and paths
        • Create a path
        • Curve a path
        • Add a point on a path
        • Delete a point on a path
        • Convert shape to path
      • Import
      • Layer mask
    • Animating
      • Design vs Animate mode
      • Auto-animate
      • Timeline
        • Duration and playback
        • Playhead and controls
        • Keyframes
          • Add a keyframe
          • Duplicate keyframes
          • Keyframe thumbnails
        • Transition bar
        • Layers and properties
      • Easing
        • Add easing
        • Custom easing
          • Speed Graph
          • Anticipation
          • Overshoot
        • Easing presets
    • Organising Layers
      • Layer actions
        • Select/ Multi-select layers
        • Rename a layer
        • Align layers on canvas
        • Re-order layers
        • Delete a layer
        • Hide a layer
        • Lock a layer
      • Groups
        • Grouping layers
        • Ungroup layers
    • Properties
      • Transform
        • Position
        • Scale
        • Size/ Dimensions
        • Rotation
        • Skew
        • Anchor Point (Origin)
        • Corner Radius
      • Visibility
      • Fill/ Color
        • Add/ change fill color
        • Gradient
          • Linear gradient
          • Radial gradient
          • Gradient stops
          • Gradient handles (width and direction)
        • Eye dropper
        • Fill Opacity
        • Document colors
        • Color model
      • Stroke
      • Reveal Path (Trim path)
    • Canvas
      • Infinite Canvas/ Multiple Artboards
      • Artboard properties
      • Layer controls (HUDs)
        • Layer transform controls
        • Motion Path
          • Create a motion path
          • Curving a motion path
          • Motion path easing
      • Zoom
      • Animation Duration
    • Interactivity
      • Intro to Interactivity
      • States
      • Interactions
      • Formulas
      • Using Interactive Lotties
  • Export & Hand-off
    • Comments
    • Share link to file
    • Livelink (CDN)
      • Optimisation
      • Customising embed links
    • Code Export Platforms
      • Web
        • JavaScript (Vanilla)
        • React JS
        • Angular
        • Vue JS
        • Webflow
        • Framer
        • Wordpress
      • Mobile
        • iOS
        • Android
        • React Native
    • File download
      • Lottie JSON download
      • GIF download
      • MP4 download
Powered by GitBook
On this page
  • Sweep start
  • Sweep end
  • Offset

Was this helpful?

  1. Editor
  2. Properties

Reveal Path (Trim path)

PreviousStrokeNextCanvas

Last updated 1 year ago

Was this helpful?

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'

Sweep start

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.

Sweep end

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.

Offset

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.