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.

The workspace in a design tool where you create and arrange visual elements, representing the artboard or page you’re designing. In Framer, the cursor that lets you precisely place and manipulate elements. The scale.canvas is where you build your site visually, with a floating canvas supports zoom, pan, and rulers to help you work at any

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.

Scalable Vector Graphics—an image format using mathematical paths instead of pixels, staying crisp at any size. SVGs are perfect for logos, icons, and illustrations that need to scale across different screen sizes and densities. Framer supports SVG import and handles them optimally for web delivery.

CSS operations that modify element geometry—translate, rotate, scale, skew—without affecting document flow. Transforms are hardware-accelerated for smooth performance and power many animation effects. Combine transforms for complex visual manipulations.

An HTML tag telling mobile browsers how to scale and size the page for their screens. The viewport meta tag is essential for mobile-responsive designs to display correctly. Framer automatically includes proper viewport settings.

Design that adapts fluidly to mobile screen sizes through flexible layouts, scaled typography, and touch-friendly interactions. Mobile responsiveness is essential as mobile traffic often exceeds desktop. Test designs on actual devices to catch issues emulators miss.

A methodology for building design systems from smallest elements (atoms) up through molecules, organisms, templates, and pages. This approach creates reusable, composable components that scale efficiently across large projects. Framer's component system naturally supports atomic design principles with nested components.

A linked copy of a component that inherits properties from its main component while allowing local overrides. Instances update automatically when the main component changes, maintaining consistency at scale. Override specific properties on instances when variations are needed.

An image format made of a grid of colored pixels where quality degrades when scaled up, common formats include PNG and JPEG. Bitmaps excel at photographs and complex imagery but become pixelated at larger sizes. Use vector formats for logos and icons that need to scale across different contexts.

A plugin focused on CMS operations such as syncing content, transforming fields, or managing collections at scale. CMS plugins help automate repetitive content tasks and integrations.

A design tool used to resize selected layers proportionally, often including typography and effects. It helps preserve visual relationships when scaling multi-element compositions.

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.

In Framer, smart components package structure, styling, content controls, and states into reusable building blocks so teams can update repeated UI consistently across a site.