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
  • Skew magnitude:
  • Skew direction

Was this helpful?

  1. Editor
  2. Properties
  3. Transform

Skew

PreviousRotationNextAnchor Point (Origin)

Last updated 1 year ago

Was this helpful?

The Skew property helps you distort your layer object to form a tilted leaning shape, depending on the the magnitude or direction that's applied.

To adjust the Skew of your object:

  • Select your layer and go to the property panel

  • Open the 'Advanced Transform' properties section

  • Adjust the Skew magnitude and direction.

Skew magnitude:

This determines how far you'd like to stretch the shape in a given direction to form a skew. The more this value is, the more distorted the shape is in the specified direction.

If this value is negative E.g -40, it pulls the shape in the opposite direction of the specified skew direction.

Skew direction

Skew direction allows you to determine the direction you want the skew to be applied, the shape is then pulled towards this direction according to the value set in the skew magnitude.

Skew direction is an angle, given in degrees (º). Imagine it as up (↑), down (↓), left (←) and right (→).

  • It starts at 0º, which is the right (→ ) and changes direction clockwise according to the set angle.

  • 90º is facing down (↓),

  • 180º is left (←),

  • 270º is up (↑)

  • and 360º brings us back to our initial direction, right ( →).

'Skew direction' on its own doesn't apply a skew to the shape unless a magnitude is specified. Remember to adjust your skew value to see it applied in the direction you've set.