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.

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.

A type of animation that creates fluid, continuous motion between states or along scroll, often used for page transitions. Flow effects add polish and help users maintain context during navigation. Framer's transitions support various flow effects between pages and component states.

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 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.

A scrolling effect where background elements move slower than foreground elements, creating an illusion of depth. Parallax adds visual interest and engagement but can impact performance and cause motion sickness. Use parallax sparingly and provide reduced-motion alternatives for accessibility. See Creating parallax with Scroll Speed in Framer.

A transform that spins an element around a center point by a specified angle measured in degrees. Rotation adds dynamism and visual interest to layouts and interactions. Combine rotation with other transforms for complex motion sequences.

Animation properties that change continuously based on scroll position, creating smooth parallax and reveal effects. Scroll-linked animations tie element properties like opacity, scale, or position to scroll progress. Use sparingly for performance and respect reduced motion preferences.

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.

User Experience—the overall experience a person has when using a product, encompassing usability, accessibility, and emotional response. Good UX anticipates user needs and removes obstacles to goal completion. UX extends beyond UI to include performance, content clarity, and trust signals.

An overlay window that appears on top of page content, often used for promotions, email captures, or important notices. Pop-ups can be effective but easily frustrate users if poorly timed or hard to dismiss. Consider alternative placements and respect user preferences.

The study of how colors interact, combine, and influence perception, guiding designers in creating harmonious palettes that evoke specific emotions. Understanding complementary, analogous, and triadic color relationships helps create visually balanced designs. Apply color theory to establish brand moods and guide user attention to key elements.

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.

In Framer, scroll effects let designers tie motion to page position, so sections can fade, move, scale, or transform as someone scrolls through the experience.

Framer’s transform controls can add dimensional motion and perspective to cards, mockups, and interaction states while keeping the elements editable on the canvas.

Framer tickers can add motion to marquees, partner logos, feature labels, and repeated content while preserving a clean editable layout.

In Framer, SVG animations can add lightweight motion to icons, illustrations, logos, and interface details while keeping visuals crisp at any size.