Lottielab Docs

Lottielab Docs

• Welcome to Lottielab
• Tutorials
• Design vs Animate mode
• Keyboard Shortcuts
• FAQ
• Dashboard UI Overview
• Files: Your animations are saved as Files in Lottielab. Here are a few actions you can take with your Files to better work with or manage them.
• 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 UI Overview
• Tools: Your animations are saved as Files in Lottielab. Here are a few actions you can take with your Files"
• Selection Tools: The selection tools allow you to interact with your canvas and the layers on it in various ways.
• Shape Tools: The shape tools allow you to create basic shapes like the Rectangle or Ellipse on your artboard, so you can further edit or animate them.
• Pen tool and paths: Already have assets you'd like to get started with, you can import a Lottie or SVG file directly from your dashboard
• 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: Your animations are saved as Files in Lottielab. Here are a few actions you can take with your Files"
• 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: Hex code, RGB andHSL
• 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: An introduction to creating Interactive Lotties with state machines using Lottielab.
• Intro to Interactivity: A guide on getting started with creating Interactive Lotties using Lottielab.
• States: In-depth reference about the basic building block of Lottielab Interactivity.
• Interactions: In-depth reference on interactions in Interactive Lotties, and how to use them to achieve rich, reactive animations and components.
• Formulas: Reference manual for the advanced Custom formula feature.
• Using Interactive Lotties: Options for exporting, embedding and playing Interactive Lotties on your own websites and apps.
• Comments
• Share link to file
• Livelink (CDN): Everything you need to know about Lottielab's powerful Lottie hosting, versioning and optimisation feature.
• Optimisation: A primer on the Livelink displayed size, optimisation percentage, and what it all means.
• Customising embed links: The Lottie Embed Link supports several URL (query) parameters which can be used to control how the Lottie will be played when you embed or otherwise use this link.
• Code Export Platforms
• Web
• JavaScript (Vanilla)
• React JS
• Angular
• Vue JS
• Webflow
• Framer: This guide covers three methods: adding static Lottie animations, creating interactive Lotties with custom Framer interactions, and importing interactive Lotties with preserved Lottielab interactions.
• Wordpress
• Mobile: Your animations are saved as Files in Lottielab. Here are a few actions you can take with your Files"
• iOS
• Android
• React Native
• File download
• Lottie JSON download
• GIF download
• MP4 download

Agent Instructions: Querying This Documentation

If you need additional information, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on a page URL with the ask query parameter:

GET https://docs.lottielab.com/getting-started/welcome-to-lottielab.md?ask=<question>

The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.