---
title: "ScrollytellingSplit — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Dulaj Design · Sections. Captivate users with sticky side"
canonical: "https://framer.elliotli.dev/component/scrollytellingsplit"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/ScrollytellingSplit

# ScrollytellingSplit

Captivate users with sticky side

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

![ScrollytellingSplit preview image 1](https://framer.elliotli.dev/og/component/scrollytellingsplit/66cbd049abb4d51d/1600x1200.jpg)

## Summary

Captivate users with sticky side

## Description

### About

SideScroll Story brings fluid, narrative-driven presentation directly to your Framer projects. This component allows you to keep an eye-catching visual panel locked perfectly in place on one side of the screen while your users scroll through corresponding text sections on the other. It is ideal for breaking down complex features, showcasing detailed portfolio case studies, or building editorial landing pages that demand a high-end, immersive feel.

### What it does

It sets up a responsive two-column grid where one side remains sticky while the other handles text chapters. As your visitor scrolls down the page, the component monitors the active section and automatically changes the image panel using smooth transition effects. It includes built-in progress indicator dots to show step progression and floating text annotations to keep the context clear and engaging throughout the journey.

### What you can customize

-   **Layout and behavior:** Choose between standard manual items or dynamic CMS data connection. Adjust the container max width, global padding, and decide whether your visual panel sits on the left or the right side.
    
-   **Transitions and navigation:** Fine-tune your storytelling flow by selecting transition effects like Crossfade,
    
-   **Typography and style:** You have total design control over the text layers.
    
-   **Annotations:** Toggle floating text annotations on or off, set their position on the screen, and change their backgrounds, font sizes, border radiuses, padding values, and backdrop blur strengths.
    

### Great for

-   Detailed product feature deep-dives
    
-   Portfolio case studies and visual presentations
    
-   Interactive step by step guides and brand timelines
    
-   Company overview and milestone sections
    
-   Media rich editorial stories and marketing landing pages
    

### Need help?

Questions or feedback? Reach me anytime: [dulajdilshan766@gmail.com](mailto:dulajdilshan766@gmail.com) or on X @Dulajweb

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

-   All · #5658

## Details

- **Author**: Dulaj Design
- **Price**: $15.00
- **Published**: 2026-06-19
- **Updated**: 2026-08-28
- **Added**: 2026-06-19
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes