Framer Motion detector

How can you check if a website uses Framer Motion?

Detecting whether a website utilizes Framer Motion involves looking for specific markers in the page source code. Framer Motion is a library for animations in React, and it has unique identifiers that can help you confirm its usage.

Here’s a step-by-step guide on how to do it:

1. Open the Page Source: Right-click on the webpage and select “View Page Source” or press Ctrl+U (Windows) or Cmd+Option+U (Mac) to open the page’s source code.
2. Search for Framer Motion Specific Attributes: Use Ctrl+F (Windows) or Cmd+F (Mac) to open the search function and look for the following keywords:
   • data-framer-motion: This attribute is commonly added to elements to indicate they are animated using Framer Motion.
   • framer-motion: Look for this exact term in script or link tags. It often indicates the inclusion of Framer Motion library files or components.
3. Check for Import Statements: If you have access to the JavaScript files in the source code, look for import statements that reference Framer Motion, such as:import { motion } from 'framer-motion';
4. Look for Motion Components: Search for the use of motion components in the code. Examples of these components include <motion.div>, <motion.span>, and other HTML elements prefixed with motion..
5. Examine Script Tags: Check for script tags that reference the Framer Motion CDN or package. This could look something like this: <script src="https://unpkg.com/framer-motion/dist/framer-motion.umd.js"></script>
6. Search for Animations in the Code: Look for any code snippets or functions that mention animations or transitions, as Framer Motion provides tools for these features. Key functions to search for might include animate, initial, and exit.
7. Inspect Network Requests: Open the developer tools (F12) and navigate to the “Network” tab. Refresh the page and look at the list of loaded resources for any files or scripts related to Framer Motion (e.g., filenames containing “framer-motion”).