A JavaScript function that modifies component behavior without changing the component itself, enabling custom interactions and logic. Overrides let you add functionality like form validation, state management, or API calls while keeping components reusable. This separation of concerns keeps your component library clean while allowing page-specific customizations.

User-written JavaScript, CSS, or HTML that extends functionality beyond built-in features. Custom code enables advanced interactions, integrations, and unique behaviors tailored to specific requirements. In Framer, add custom code through code components, overrides, or the custom code section in site settings.

Framer Motion is now Motion, a high-performance animation library for React and JavaScript. The old name still appears in tutorials and search results, but current docs and packages use Motion.

If you are building a website in Framer, you do not need to install Motion or write Framer Motion code. Framer has Motion-powered animation tools built into the canvas, so you can create polished animations visually: appear effects, scroll animations, hover and tap states, transitions, and component variants. That gives you Framer Motion-style results without setting up npm, importing an animation library, or maintaining custom React animation code.

Bringing websites to life with animation in Framer

2:31

If your goal is to build a website, start with Framer instead of reaching for animation code first. You can design the page, add motion, and publish from one visual workflow — then use custom code only when a project truly needs it.

Use Motion directly when you are building a custom React or JavaScript app and need code-level animation control. Use Framer when you want to design, animate, and publish a site visually.

To learn the no-code path, explore Framer’s Academy, or open the Framer homepage to start building visually.

A JSON-based animation format that renders Adobe After Effects animations on the web with small file sizes and infinite scalability. Lottie animations are lightweight, vector-based, and highly customizable through JavaScript. Import Lottie files into Framer for sophisticated animations without performance penalties.

A JavaScript library for building user interfaces through composable components and declarative rendering. React's component model powers many modern web applications and design tools. Framer is built on React, enabling code components and advanced customizations.

Document Object Model — the programming interface representing HTML documents as a tree structure that JavaScript can manipulate. Understanding the DOM helps debug layout issues and write effective custom code.

JavaScript Object Notation—a lightweight data format for storing and transmitting structured data, widely used in web APIs. JSON's human-readable syntax makes it easy to work with for configurations and data exchange. Framer uses JSON for various configurations and API integrations.

The process of removing unnecessary characters from code—whitespace, comments, line breaks—to reduce file size. Minification speeds up loading without changing functionality, typically applied to CSS and JavaScript. Framer automatically minifies code for production deployment.

Removing or replacing branding so products or services can be resold under another brand name. White label options help agencies deliver branded client experiences. Framer's business plans include white label options.

A format for embedding structured data in pages using JavaScript Object Notation for Linked Data. JSON-LD helps search engines interpret content entities and can enable rich search results. See Structured data through JSON-LD.

A browser API for making network requests from JavaScript using promises. Fetch is commonly used to retrieve external data and populate dynamic UI or CMS workflows.

In Framer, code splitting supports faster initial loads by avoiding unnecessary JavaScript on first view and loading additional code only when it becomes relevant.