---
title: "ScrollBoxStrip — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Dhruv Sheladiya · Text. scroll-driven image transition"
canonical: "https://framer.elliotli.dev/component/scrollboxstrip"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/ScrollBoxStrip

# ScrollBoxStrip

scroll-driven image transition

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

![ScrollBoxStrip preview image 1](https://framer.elliotli.dev/og/component/scrollboxstrip/fd7519c05c1f9125/1600x1200.jpg)

## Summary

scroll-driven image transition

## Description

### How to Use

Getting this cinematic effect running on your Framer site takes less than two minutes:

1.  **Add to Canvas:** Drag and drop the **Scroll Box Strip** component onto your page.
    
2.  **Set Layout Size:** Set both the width and height properties to **Fixed** (recommended sizing is 100% width and 100vh height to let it command the full screen).
    
3.  **Upload Your Visuals:** In the properties panel, upload your primary image into **Layer 1**. For **Layer 2**, choose whether you want to transition into a solid brand **Color** or a secondary **Image**, then upload/select your asset.
    
4.  **Customize Typography:** If **Labels** are enabled, type your custom text for the left and right background tracks (e.g., "Scroll Down" and "Scroll Up") and style them using the built-in font configuration tool.
    
5.  **Fine-Tune the Motion:** Adjust the **Count** slider to change the number of horizontal slices, and tweak the **Scrub** and **Scroll** values to make the transition feel heavier or faster depending on your page's pacing.
    

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

-   All · #11168

## Details

- **Author**: Dhruv Sheladiya
- **Price**: $5.00
- **Published**: 2026-05-26
- **Updated**: 2026-05-26
- **Added**: 2026-05-17
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos