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.
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.
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.
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
Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb
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.
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.
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.
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
Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb
Dulaj dilshan
