Rich Scroll Reveal lets you build full storytelling sections and pages in Framer using animated scroll-reveal text with real Framer components embedded directly inside the content.
Instead of revealing only plain text, you can connect components such as badges, icons, logos, pills, avatars, mini cards, buttons, images, or custom design elements and place them inline inside your scroll-based story.
It is built for creators who want to make modern narrative pages without manually building every word, component, and animation on the canvas.
The component uses one main text field and 20 connected component slots.
In the Text field, you can write your content normally and place slot tokens wherever you want an inline component to appear.
Example:
“We create high-converting campaigns with [slot:1] AI creators and [slot:2] performance systems.”
In this example, [slot:1] renders the component connected to Slot 1, and [slot:2] renders the component connected to Slot 2.
The slot tokens do not appear on the published page. They are only used by the component to know where each connected Framer component should appear.
You can use tokens from [slot:1] to [slot:20].
Rich Scroll Reveal also supports line breaks inside the Text field.
You can add a line break using either:
<br/> or [br]
Both options render as an actual line break on the page, so you can structure longer storytelling sections without duplicating the component instance for every new line or paragraph.
Example: We create high-converting campaigns with [slot:1]<br/>AI creators, scroll storytelling, and conversion-focused design.
You can also use multiple line breaks when you want more spacing between parts of your story.
First, create or paste the Framer component you want to use inline near the desktop breakpoint. This can be a badge, icon, logo, pill, card, button, avatar, image, or any other Framer component.
Then select the Rich Scroll Reveal component on the canvas.
When the component is selected, you will see a purple outline around it. On the right side of the selected component, there is a small purple pill with three white dots.
Click that three-dot connector pill. A purple connection line will appear from the component.
Drag that line to the Framer component you want to connect. Click the component and it's connected
After connecting it, Framer will ask you to choose which slot you want to connect it to. Choose any available slot from Slot 1 to Slot 20.
After assigning the component to a slot, go back to the Text field and place that slot token wherever you want the component to appear.
For example, if you connected a badge to Slot 1, write [slot:1] inside your text.
The connected component will render inline inside the text at that exact position and reveal together with the scroll animation.
If your inline component needs a different mobile version, create or duplicate a mobile-friendly version of that component.
For example, you can connect the desktop/tablet version to Slot 1 and the mobile version to Slot 2.
On your desktop/tablet text, use [slot:1].
On your mobile breakpoint, replace [slot:1] with [slot:2].
This lets you show a different connected component on mobile while keeping the same storytelling structure and reveal behavior.
The Text field is where you write your full paragraph, section copy, or storytelling content.
You can add slot tokens directly inside the text, such as [slot:1], [slot:2], or [slot:3].
Styled Words lets you highlight specific words with a secondary font style. Add comma-separated words such as:
growth, creative, performance
Words added to Styled Words will use the Secondary Font settings.
Main Font controls the default typography for the full text.
Secondary Font controls the style for highlighted words. Use it to make important words feel more premium, bold, italic, expressive, or visually distinct.
Default Color controls the unrevealed text color.
Reveal Color controls the final revealed text color.
Enable Blur adds a soft blur effect to unrevealed words and inline components.
Blur Amount controls how strong the blur effect is.
Enable Opacity makes unrevealed content fade in as it reveals.
Start Percent and End Percent control when the reveal animation starts and finishes while scrolling.
Transition Duration controls how smooth or fast the reveal feels.
Smooth Animation lets you turn smooth transitions on or off.
You can control the scroll timing using the Target Section ID field.
A common setup is to give the parent section an ID, then add the same ID into the Target Section ID field.
You can also create a transparent tracking frame inside the section, position it absolutely in the background, remove its fill color, give it an ID, and use that ID inside the component.
This tells Rich Scroll Reveal which section should control the scroll progress.
Word-by-word scroll reveal
Inline Framer component support
20 component slots
Slot tokens from [slot:1] to [slot:20]
Real Framer component connectors
Natural inline component sizing
Main font controls
Secondary font controls
Styled words support
Default and reveal color controls
Optional blur effect
Optional opacity effect
Scroll timing controls
Target Section ID support
Padding controls
Vertical alignment controls for connected components
Margin controls for connected components
Responsive-friendly slot workflow
Storytelling landing pages
AI agency websites
SaaS product pages
Portfolio case studies
Product showcase sections
Interactive typography layouts
Modern hero sections
Scroll-based narrative pages
Creative agency websites
Rich Scroll Reveal includes 20 component slots by default, which should cover most storytelling pages.
In case your use case exceeds 20 slots and you need to connect more inline components, double-click the component to load Workshop AI and ask it to extend the slot system.
Example prompt:
“Please extend this component with 10 more slots, increasing it from 20 slots to 30 slots. Keep the existing structure, styling controls, scroll reveal behavior, inline component rendering, responsive behavior, and all current functionality exactly the same.”
If you need any help or face any issue with the component, feel free to reach out to me:
X: https://x.com/abdulla_builds
Email: abdullahahmada389@gmail.com
Abdullah Ahmed
