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.

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.

   

   Default Lottie component in Framer.

Interactive Lottie with Custom Interactions in Framer

Create an interactive Lottie with Framer-specific custom interactions.

1. Open the Lottielab Plugin in Framer.

   

   Searching for the Lottielab plugin in Framer.
2. Paste the Lottie JSON URL into the plugin.

   

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

   

   Viewing available states.
4. Add custom interactions via Framer’s variants.

   

   Setting Framer interactions after wrapping the Lottie in a Frame and converting it to a component.

Note: Plans for v2 of the Lottielab Plugin will integrate "Import a Lottie with pre-built Lottielab interactions" into this workflow, simplifying the process.

Pre-built Lottielab interactions in Framer

Import a Lottie with pre-built Lottielab interactions.

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

   

   Copied the Framer component
2. Insert the Lottie JSON URL as the component’s source.

   

   Pasted the component in Framer and selected the component then pasting in the JSON URL
3. Enjoy the interactive Lottie with preserved Lottielab interactions.