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
  • Overview (New Timeline)
  • Key Improvements in the New Timeline (Top Image):

Was this helpful?

  1. Editor
  2. Animating

Timeline

PreviousAuto-animateNextDuration and playback

Last updated 3 months ago

Was this helpful?

The timeline allows you to playback your animation and is the control centre for to determine the timing of each property change you make.

Overview (New Timeline)

You'll notice that we recently updated our timeline design. Majority of the features available in the timeline remain the same, so you should find the functionalities you're used to are still possible with the same actions.

Below is an image of the old timeline for reference:

Key Improvements in the New Timeline (Top Image):

✅ Less Cluttered, More Readable Layout:

  • In the previous version, elements were packed together, making it hard to scan animation properties quickly.

  • The new version spreads elements out more efficiently, reducing visual noise and making it easier to navigate.

  • The keyframe Thumbnails are now permanently disabled. Whilst this means you can no longer see a visual reference of your animations across the timeline, it also reduces the clutter on the timeline making it easier to get to what you need faster.

  • Aggregated keyframes are no longer visible on a layer/group level anymore. This means that whilst you can't tweak keyframes directly on a group level, it also reduces the visual noise allowing you to separate layer and keyframe elements and actions more easily.

✅ Improved Layer & Animation Property Organisation for better navigation:

  • The old version had denser groupings, similar-looking rows and transition bars for both layers and animations, and no label indicators to differentiate elements, making it difficult to locate individual elements.

  • The new version clearly separates layers and properties, which makes finding and editing specific animations much faster, both in terms of spacing and label indicators too.

✅ Better Keyframe & Transition Control:

  • Layer properties that can be animated are now more explicit, clicking the add button on a layer level shows all animatable properties for the layer, helping you get started more easily.

  • In the previous version, keyframes and animations looked visually compacted, making it harder to differentiate and work with keyframes and transitions at a glance.

  • The new version uses better descriptions, spacing and highlights active transitions, so it’s easier to see what’s going on and tweak things faster.

✅ Enhanced Utilities (Navigation, Selection, Dragging, Duplication, Renaming):

  • You can perform quick actions to help you navigate your animations better such as expanding and collapsing all rows to quickly get to layers you need.

  • The selection experience for individual and multiple keyframes is now improved, making it faster to perform basic timeline workflow actions such as those below.

  • Scaling, duplicating and playing back individual and multiple keyframes and transitions are now much easier and powerful due in part to the above.

  • Renaming layers directly in the timeline is another usability win—no need to go elsewhere to update names.

Duration and playback
Playhead and controls
Keyframes
Transition bar
Layers and properties
creating keyframes