Getting this cinematic effect running on your Framer site takes less than two minutes:
Add to Canvas: Drag and drop the Scroll Box Strip component onto your page.
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).
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.
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.
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.
Getting this cinematic effect running on your Framer site takes less than two minutes:
Add to Canvas: Drag and drop the Scroll Box Strip component onto your page.
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).
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.
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.
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.
