A custom React component written in code that extends Framer's capabilities beyond built-in features. Code components enable advanced functionality like custom animations, API integrations, and complex interactive elements. They live alongside visual components and can accept properties that designers control without touching code.

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.

Graphics Interchange Format—a compressed image format supporting animation and transparency, limited to 256 colors. GIFs are popular for short animations and reactions but have large file sizes. Consider modern formats like WebP or video for better compression and quality.

A minimalist design style emphasizing clean shapes, bright colors, and two-dimensional elements without shadows, gradients, or textures. Flat design emerged as a reaction to skeuomorphism and dominates modern digital interfaces. While visually clean, ensure sufficient visual hierarchy and affordances for usability.

An AI model integrated into a developer’s editor that participates in the coding process like a human pair—suggesting next steps, flagging potential bugs, explaining unfamiliar APIs, and generating boilerplate. GitHub Copilot popularized the term. Unlike agentic tools, an AI pair programmer typically acts reactively as the developer types rather than planning multi-step tasks autonomously.