Movement applied to elements that brings interfaces to life and guides user attention through visual storytelling. Thoughtful animation improves usability by providing feedback, showing relationships between elements, and making interactions feel responsive. Framer offers powerful animation tools including appear effects, scroll-based triggers, and component variants with smooth transitions.

A predefined state or version of a component, such as primary/secondary buttons or default/hover/active states. Variants keep related component options organized together while enabling smooth transitions between states. Framer's variant system supports complex interaction patterns with animated transitions between any variant combination.

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.

A gradual transition between two or more colors, creating depth, dimension, and visual interest. Gradients add sophistication to backgrounds, buttons, and text without requiring images. Framer supports linear, radial, and angular gradients with multiple color stops and precise positioning.

The transparency level of an element, ranging from 0% (invisible) to 100% (fully opaque). Reduce opacity to create overlays, de-emphasize secondary content, or build layered visual effects. Animate opacity for smooth fade-in and fade-out transitions.

The animation or effect that occurs when navigating between pages, providing visual continuity. Page transitions can make navigation feel seamless and help users maintain context. Framer supports various transition effects between pages.

A color transition radiating from a center point outward in a circular or elliptical pattern. Radial gradients create depth, spotlight effects, and organic backgrounds. Combine with other fills and blend modes for sophisticated visual effects.

Animation triggered by scrolling, from simple reveal effects to complex parallax and timeline-based sequences. Scroll animations engage users and create storytelling opportunities as they progress through content. Use Framer's scroll-triggered effects for appear animations and scroll-linked transitions.

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.

The current condition of a component or interface element, such as default, hover, active, loading, or error. Managing state effectively enables responsive, interactive experiences. Design all relevant states and transitions between them.

A predefined variation of a component representing different states, themes, or configurations. Variants keep related options organized and enable smooth transitions between states. Framer's variant system supports complex interactive components.

A web application that loads once and dynamically updates content without full page reloads. SPAs provide app-like experiences with smooth transitions and responsive interactions. Framer supports SPA-style navigation with page transitions.

Visual cues that suggest how an element can be used, such as a raised button appearing clickable or an underlined word suggesting a link. Affordances draw on learned conventions and physical metaphors to make interfaces intuitive without instructions. Strong affordances reduce learning curves and help users discover functionality naturally.

Animated transitions between page or state views that preserve continuity as content changes. View transitions can make navigation feel smoother and reduce abrupt visual jumps.

In Framer, radial gradients can highlight sections, create soft glows, add background atmosphere, or draw attention to important content without adding image assets.

In Framer, instant navigation helps multi-page sites feel faster by reducing delay between clicks and page changes, especially when paired with preloading and optimized routes.