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 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 JSON-based animation format that renders Adobe After Effects animations on the web with small file sizes and infinite scalability. Lottie animations are lightweight, vector-based, and highly customizable through JavaScript. Import Lottie files into Framer for sophisticated animations without performance penalties.

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.

What happens when content exceeds its container's boundaries—it can be visible, hidden, scrollable, or clipped. Overflow settings affect scrolling behavior and whether content bleeds outside containers. Hidden overflow is useful for clipping decorative elements and creating scroll containers.

An animation tool and runtime for creating interactive graphics that respond to user input in real time. Rive animations are lightweight and highly interactive, enabling complex state-driven animations. Import Rive files for sophisticated interactive elements.

Animations that play once when elements enter the viewport during scrolling, commonly used for section reveals. Scroll-triggered animations add polish and draw attention to content as it appears. Framer's appear effects provide scroll-triggered animation capabilities. See Triggering animations on scroll in Framer.

Animated scrolling that eases between positions rather than jumping instantly, creating smoother navigation. Smooth scroll improves user experience when jumping to anchors or returning to top. Ensure smooth scroll doesn't interfere with user scroll input.

A measurement of how far down a page users scroll, indicating content engagement and page length effectiveness. Low scroll depth may indicate content problems or fulfilled user intent at the top. Track scroll depth to optimize content placement and page structure.