Scroll-Linked Animation

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.

Related terms

Related terms

  • Easing

    Motion

    The rate of change in an animation over time, controlling acceleration and deceleration for natural-feeling motion. Linear easing feels mechanical while ease-out mimics physical objects slowing from friction. Framer provides preset easing curves and custom bezier options to fine-tune animation feel. See Mastering transitions and easing in Framer.

  • Keyframe

    Motion

    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.

  • 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.

  • Parallax

    Motion

    A scrolling effect where background elements move slower than foreground elements, creating an illusion of depth. Parallax adds visual interest and engagement but can impact performance and cause motion sickness. Use parallax sparingly and provide reduced-motion alternatives for accessibility. See Creating parallax with Scroll Speed in Framer.

  • 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.

  • Scroll-Triggered Animation

    Motion

    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.

  • Smooth Scroll

    Interaction

    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.

  • Instance

    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.