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
  • Welcome Screen
  • Navigating the Editor

Was this helpful?

  1. Editor

Editor UI Overview

PreviousDelete a folderNextTools

Last updated 11 months ago

Was this helpful?

Welcome Screen

After signing up, on your first login, you'll land on the Welcome view of the dashboard. This gives you a brief overview of how to animate with Lottielab using the and .

Navigating the Editor

  1. Lottielab logo: This leads you back to the landing page

  2. Navigation panel: This gives you access to

    • Drafts: Files in your drafts are for you only and cannot be shared with anyone else. To share a file in your drafts, simply move the file to a team folder.

    • Learn: This opens up the learn panel, which has resources to help you get started animating with Lottielab from Tutorials and examples, to joining our community discussion.

    • Examples: This directs you to various example animations that have been created using Lottielab

    • User settings: Here, you can access and update your personal details or log out of your account.

  3. Teams: The team section allows enables you to create a team or navigate through your existing teams and folders in them.

  4. Header: This keeps you updated on where you are at any point, whether in your drafts, a team or specific folder.

  5. Primary action buttons: These allow you to create a ‘New Lottie File’ or ‘Import’ an existing Lottie or SVG file to animate.

  6. Invite members to a team

  7. Team settings: This opens up modal where you can view and/or update details of a team such as the team name and members.

  8. Animation Files: These are your Lottie animations files. They are currently sorted by default based on their creation date, with the most recent one at the top most left. You can also access menu options for your files directly from the dashboard by right-clicking on your mouse/ trackpad or hovering and selecting the kebab menu (…) at the top right of each animation card.

auto-animate
animate mode