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.