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.