Scroll-Triggered Animation

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.

Related terms

Related terms

  • Appear Effect

    Framer

    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.

  • Motion

    Motion

    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.

  • Overflow

    Layout

    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.

  • Rive

    Motion

    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.

  • Scroll Animation

    Motion

    Animation triggered by scrolling, from simple reveal effects to complex parallax and timeline-based sequences. Scroll animations engage users and create storytelling opportunities as they progress through content. Use Framer's scroll-triggered effects for appear animations and scroll-linked transitions.

  • Below the Fold

    Design

    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.