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
  • Static Lottie in Framer
  • Interactive Lottie with Custom Interactions in Framer
  • Pre-built Lottielab interactions in Framer

Was this helpful?

  1. Export & Hand-off
  2. Code Export Platforms
  3. Web

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.

PreviousWebflowNextWordpress

Last updated 3 months ago

Was this helpful?

Static Lottie in Framer

Add a non-interactive Lottie animation using Framer’s built-in tools.

  1. Use Framer’s Lottie component. Replace the source with a CDN link or uploaded Lottie file.

Interactive Lottie with Custom Interactions in Framer

Create an interactive Lottie with Framer-specific custom interactions.

  1. Open the Lottielab Plugin in Framer.

  2. Paste the Lottie JSON URL into the plugin.

  3. Access available states, wrap the Lottie in a Frame, and convert it to a component.

  4. Add custom interactions via Framer’s variants.

Pre-built Lottielab interactions in Framer

Import a Lottie with pre-built Lottielab interactions.

  1. Insert the Lottie JSON URL as the component’s source.

  2. Enjoy the interactive Lottie with preserved Lottielab interactions.

Note: Plans for v2 of the Lottielab Plugin will integrate "" into this workflow, simplifying the process.

Copy the Lottielab component and paste it into Framer. [Copy from here: ]

Lottielab Component
Import a Lottie with pre-built Lottielab interactions
Default Lottie component in Framer.
Searching for the Lottielab plugin in Framer.
Pasted the JSON URL in the plugin.
Viewing available states.
Setting Framer interactions after wrapping the Lottie in a Frame and converting it to a component.
Copied the Framer component
Pasted the component in Framer and selected the component then pasting in the JSON URL