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 positioning method that anchors elements relative to the browser viewport, keeping them visible during scrolling. Fixed elements are useful for sticky navigation, floating action buttons, and persistent calls to action. Use fixed positioning sparingly to avoid blocking content and reducing usable space.

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.

A CSS unit equal to 1% of the browser viewport height, enabling layouts relative to screen size. Vh units are useful for full-screen sections and height-based layouts. Be aware that vh can behave unexpectedly on mobile due to address bar behavior.

A CSS unit equal to 1% of the browser viewport width, enabling fluid sizing relative to screen width. Vw units are useful for responsive typography and full-width elements. Combine with max-width constraints for practical maximum sizes. See Relative, fixed, and viewport Sizing in Framer.

Content that requires scrolling to see, positioned lower on the page than the initial viewport. While above-the-fold content grabs attention, below-the-fold content tells your complete story and provides detailed information for engaged visitors. Modern web design recognizes that users do scroll—what matters is giving them a reason to continue down the page.

The point at which content becomes hidden until the user scrolls, varying by device and browser window size. The fold isn't fixed—a laptop, phone, and tablet all have different fold positions for the same page. Design for common viewport sizes while ensuring content below the fold is still discoverable and engaging.

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.

A navigation bar that remains fixed at the top of the viewport as users scroll down the page. Sticky navigation keeps primary actions accessible without scrolling back up. Ensure sticky elements don't consume too much screen space on mobile.

Largest Contentful Paint (LCP) measures loading performance by tracking when the largest visible text or image element appears on screen.

Conditional Visibility is a rule-based display setting that renders elements only when defined conditions are met, improving relevance and personalization.

Breakpoint Overrides are responsive design adjustments applied at specific viewport widths so elements can adapt without changing the base design.