Framer Motion
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.
Bezier Curve
Motion
A mathematically defined curve used in vector graphics and animation, controlled by anchor points and handles that determine its shape. Understanding bezier curves helps create smooth, natural-feeling animations and custom easing functions. Framer’s animation curves use bezier mathematics to control the acceleration and deceleration of motion.
Canvas
Framer
The workspace in a design tool where you create and arrange visual elements, representing the artboard or page you’re designing. In Framer, the cursor that lets you precisely place and manipulate elements. The scale.canvas is where you build your site visually, with a floating canvas supports zoom, pan, and rulers to help you work at any
Easing
Motion
The rate of change in an animation over time, controlling acceleration and deceleration for natural-feeling motion. Linear easing feels mechanical while ease-out mimics physical objects slowing from friction. Framer provides preset easing curves and custom bezier options to fine-tune animation feel. See Mastering transitions and easing in Framer.
Frame
Framer
The fundamental container element in Framer that holds content and defines boundaries for layout, sizing, and visual properties. Frames are the building blocks of every Framer design, from tiny icons to full page layouts. Unlike groups, frames have their own properties and can contain responsive layouts and effects.
Keyframe
Motion
A point in an animation timeline that defines specific property values, with the software interpolating values between keyframes. Keyframe animation gives precise control over complex motion sequences. Understanding keyframes helps you create sophisticated animations in Framer's advanced motion tools.
Motion
Motion
The use of animation and movement in interfaces to communicate, guide attention, and create engaging experiences. Thoughtful motion provides feedback, shows relationships, and adds personality. Balance motion benefits with accessibility concerns and performance impacts.
Remix
Framer
Creating a new project based on an existing template or shared design, inheriting structure while enabling customization. Remixing accelerates projects by building on proven foundations. Explore Framer's community for remixable templates and components.
Spring Animation
Motion
Physics-based animation that simulates natural spring-like motion with properties like stiffness, damping, and mass. Spring animations feel more natural than linear or bezier-based easing. Framer Motion powers Framer's spring animation capabilities. See Mastering transitions and easing in Framer. See Using the Loop Effect in Framer.
Material Design
Design
Google's design system combining flat design principles with subtle shadows and motion to suggest physical depth and surfaces. Material Design provides comprehensive guidelines for creating consistent, intuitive Android and web interfaces. Many principles translate to general interface design beyond Google products.