Lovable and Framer integration: Step-by-Step Guide 2025

 

Adding Framer Dependency to Your Lovable Project

 

Since your Lovable project does not use a terminal, you need to add the Framer dependency manually into your dependency file. Open (or create) the file named package.json in the root folder of your project and add the following entry inside the "dependencies" section. If this file already exists, simply update the contents accordingly.

{
  "name": "lovable-project",
  "version": "1.0.0",
  "dependencies": {
    "framer-motion": "^10.12.16"
    // ... other dependencies
  }
}

Make sure to save this file. Lovable will now recognize that your project depends on Framer Motion.

 

Creating a Framer Integration Component

 

Next, create a new TypeScript React component that utilizes Framer Motion for animations. In your project folder structure, navigate to the src directory. Create a new folder called components (if it doesn’t exist yet). Inside that folder, create a file named FramerIntegration.tsx and paste the following code:

import React from 'react';
import { motion } from 'framer-motion';

const FramerIntegration: React.FC = () => {
  return (
    <motion.div
      initial={{ opacity: 0, x: -100 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: 0.5 }}
      style={{ padding: '20px', backgroundColor: '#f0f0f0' }}
    >
      Welcome to Framer Integration in Lovable Project!
    </motion.div>
  );
};

export default FramerIntegration;

This component demonstrates a simple animation where the div fades in and slides from the left.

 

Integrating the Framer Component into Your Main Code

 

Now, open your main application file. Often this is called App.tsx (located in the src folder). Insert an import statement for the new component and include it in your JSX code. Here’s an example of how you can do this:

import React from 'react';
import FramerIntegration from './components/FramerIntegration';

const App: React.FC = () => {
  return (
    <div>
      <h1>Lovable Project with Framer</h1>
      <FramerIntegration />
      {/ Include other components or content as needed /}
    </div>
  );
};

export default App;

Make sure you save these files. When your project loads, the FramerIntegration component will render with its smooth animation effect.

 

Final Notes

 

All changes have now been made directly in your code files. By editing the package.json, creating a new component file, and updating your App.tsx, you have successfully integrated Framer Motion into your Lovable project.