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
  • Adjust anchor point via canvas and context menu:
  • Adjust anchor point via property panel
  • Anchor point values and coordinates.

Was this helpful?

  1. Editor
  2. Properties
  3. Transform

Anchor Point (Origin)

PreviousSkewNextCorner Radius

Last updated 1 year ago

Was this helpful?

The anchor point property determines the fixed reference point for which a layer's transformation should take place from.

It acts as the centre of transformation, so wherever it's moved to, all other transform properties for that layer such as scale, rotation and even position will be applied according to it.

Adjust anchor point via canvas and context menu:

  • Right-click on your layer to open the context menu.

  • Select move anchor point, and this will allow the anchor point to be editable.

  • You can now drag the layer's anchor point directly on the canvas to any point on the layer or the canvas.

Adjust anchor point via property panel

  • Select layer and open up the 'Advanced Transform' section

  • Toggle the 'lock' icon on the Anchor point property to make it editable.

  • You can now select a preset position for your anchor point in the property panel.

  • Or for more precision, you can adjust its exact position along the x-axis or y-axis too.

Anchor point values and coordinates.

The anchor point defined by two axis, the x axis and the y axis. The coordinate at the centre of the your layer is 0,0 as its origin.

  • On the x-axis, values to the right the centre-point is positive and to the left is negative.

  • On the y-axis, downwards from the center are positive values and upwards from the center are negative values.