---
title: "Directional Scroll — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Nico Neves · Text. Stop Fighting the Scroll. Start Reacting"
canonical: "https://framer.elliotli.dev/component/directional-scroll"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Directional Scroll

# Directional Scroll

Stop Fighting the Scroll. Start Reacting

[View on Framer](https://framer.com/marketplace/components/directional-scroll/?via=elliot-li)

![Directional Scroll preview image 1](https://framer.elliotli.dev/og/component/directional-scroll/c64b196cace4cfa5/1600x1200.jpg)

## Summary

Stop Fighting the Scroll. Start Reacting

## Description

Move beyond static! **Direction-Aware Scroll** is a high-performance ticker component that reacts dynamically to user behavior. Whether your users scroll up or down, the content pivots instantly, speeds up with their "impulse," and settles back into a smooth idle state.

### Features & Customization

-   **Bi-Directional Pivot:** Set independent directions for **Scroll Up** and **Scroll Down** interactions.
    
-   **Impulse & Decay:** Content accelerates based on scroll speed (**Scroll Boost**) and naturally slows down using a customizable **Decay** rate.
    
-   **Smart Idle State:** Choose an **Idle Direction** and **Delay** so the marquee never stops moving, even when the user does.
    
-   **Max Impulse Control:** Cap the maximum speed to maintain readability during fast scrolls.
    
-   **Hover Interaction:** Includes a **Pause on Hover** toggle for better user experience.
    
-   **Style Ready:** Built-in controls for background toggles and color overlays.
    

### How to Use

1.  **Connect:** Link your content (Text, Logos, or Frames) to the **Content** slot.
    
2.  **Define Motion:** Choose your **Scroll Up** and **Scroll Down** directions (Left or Right).
    
3.  **Tune Physics:** Adjust **Base Speed** for the idle state and **Scroll Boost** for the reaction intensity.
    
4.  **Polish:** Toggle **Pause Hover** and **Decay** to perfect the tactile feel.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #8772

## Details

- **Author**: Nico Neves
- **Price**: $10.00
- **Published**: 2026-04-16
- **Updated**: 2026-04-16
- **Added**: 2026-04-13
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing