An animation that plays when an element first becomes visible on screen, typically as the user scrolls down the page. These effects add polish and draw attention to content as it enters the viewport. Framer provides various appear effects like fade, slide, scale, and blur that can be customized for timing, delay, and easing.

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.

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.

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.

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

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.