Guide
- Effects
- Apple
Guide
- Effects
- Apple
Guide
- Effects
- Apple
How to Create an Apple-Style Text Reveal on Scroll
Learn how to create an Apple-style text reveal scroll animation for your Framer website. I'll show you how to set up your components and effects in Framer to pull this effect off. After this blog, you'll be ready to add a text reveal scroll animation to your websites without any coding.
Posted by
Nandi
Table of contents
Getting started
Before we dive into creating the animation, let’s set up our project:
Starter file: Start with this remix link, so you can follow along.
Sections overview: Our design includes:
A hero section at the top.
A main section in the middle
A footer with a remix button.
Getting started
Before we dive into creating the animation, let’s set up our project:
Starter file: Start with this remix link, so you can follow along.
Sections overview: Our design includes:
A hero section at the top.
A main section in the middle
A footer with a remix button.
Getting started
Before we dive into creating the animation, let’s set up our project:
Starter file: Start with this remix link, so you can follow along.
Sections overview: Our design includes:
A hero section at the top.
A main section in the middle
A footer with a remix button.
View of Apple-style text reveal animation.
View of Apple-style text reveal animation.
View of Apple-style text reveal animation.
Once everything is ready, we’ll focus on the main section to create the scroll effect.
Adding the text layer
Click into the main section and create a new text layer.
Type out the text for your animation.
Adjust the text size and width for better readability:
Font size:
56pxHeight: Set to fit content
Width:
720px
Once everything is ready, we’ll focus on the main section to create the scroll effect.
Adding the text layer
Click into the main section and create a new text layer.
Type out the text for your animation.
Adjust the text size and width for better readability:
Font size:
56pxHeight: Set to fit content
Width:
720px
Once everything is ready, we’ll focus on the main section to create the scroll effect.
Adding the text layer
Click into the main section and create a new text layer.
Type out the text for your animation.
Adjust the text size and width for better readability:
Font size:
56pxHeight: Set to fit content
Width:
720px
Adjusting text width on right hand side panel.
Adjusting text width on right hand side panel.
Adjusting text width on right hand side panel.
Your text is now ready for the animation!
Turning the text into a component
Components are key to making this animation interactive:
Convert text to component: Press
Option + Command + Kto turn the text into a component.Create variants:
First variant: Highlight the first sentence.
Second variant: Highlight the middle sentence.
Third variant: Highlight the last sentence.
For each variant, tweak the colors to make the highlighted text stand out.
Setting sticky positioning
To make the text stick while scrolling:
In the text settings panel on the right hand side, set the text position to sticky.
Adjust the top value to
230px. This ensures the text stays at the top of the viewport while the user scrolls through the main section.
Your text is now ready for the animation!
Turning the text into a component
Components are key to making this animation interactive:
Convert text to component: Press
Option + Command + Kto turn the text into a component.Create variants:
First variant: Highlight the first sentence.
Second variant: Highlight the middle sentence.
Third variant: Highlight the last sentence.
For each variant, tweak the colors to make the highlighted text stand out.
Setting sticky positioning
To make the text stick while scrolling:
In the text settings panel on the right hand side, set the text position to sticky.
Adjust the top value to
230px. This ensures the text stays at the top of the viewport while the user scrolls through the main section.
Your text is now ready for the animation!
Turning the text into a component
Components are key to making this animation interactive:
Convert text to component: Press
Option + Command + Kto turn the text into a component.Create variants:
First variant: Highlight the first sentence.
Second variant: Highlight the middle sentence.
Third variant: Highlight the last sentence.
For each variant, tweak the colors to make the highlighted text stand out.
Setting sticky positioning
To make the text stick while scrolling:
In the text settings panel on the right hand side, set the text position to sticky.
Adjust the top value to
230px. This ensures the text stays at the top of the viewport while the user scrolls through the main section.
Setting sticky positioning on the right hand side panel.
Setting sticky positioning on the right hand side panel.
Setting sticky positioning on the right hand side panel.
Pro Tip: Make sure the overflow setting for all parent frames (like the main section and desktop frame) is set to Visible. Sticky positioning won’t work otherwise!
Creating trigger sections
Now, let’s create the sections that trigger the text highlight changes:
Add trigger frames: Create small frames (lines) to act as triggers. Name them sequentially:
1,2,3.Set scroll sections: Assign each trigger frame a Scroll Section name in the right panel:
Frame 1: Section 1
Frame 2: Section 2
Frame 3: Section 3
Applying scroll variants
Go back to the text component and add a Scroll Variant Effect for each trigger section:
When Section 2 enters the viewport, switch to Variant 2.
When Section 3 enters the viewport, switch to Variant 3.
Set the trigger effect to activate when the middle of the viewport is reached.
Now, as you scroll, the text highlight changes dynamically.
Lastly trigger frames don’t need to be visible in the final design:
Select all trigger frames and set their opacity to 0.
Pro Tip: Make sure the overflow setting for all parent frames (like the main section and desktop frame) is set to Visible. Sticky positioning won’t work otherwise!
Creating trigger sections
Now, let’s create the sections that trigger the text highlight changes:
Add trigger frames: Create small frames (lines) to act as triggers. Name them sequentially:
1,2,3.Set scroll sections: Assign each trigger frame a Scroll Section name in the right panel:
Frame 1: Section 1
Frame 2: Section 2
Frame 3: Section 3
Applying scroll variants
Go back to the text component and add a Scroll Variant Effect for each trigger section:
When Section 2 enters the viewport, switch to Variant 2.
When Section 3 enters the viewport, switch to Variant 3.
Set the trigger effect to activate when the middle of the viewport is reached.
Now, as you scroll, the text highlight changes dynamically.
Lastly trigger frames don’t need to be visible in the final design:
Select all trigger frames and set their opacity to 0.
Pro Tip: Make sure the overflow setting for all parent frames (like the main section and desktop frame) is set to Visible. Sticky positioning won’t work otherwise!
Creating trigger sections
Now, let’s create the sections that trigger the text highlight changes:
Add trigger frames: Create small frames (lines) to act as triggers. Name them sequentially:
1,2,3.Set scroll sections: Assign each trigger frame a Scroll Section name in the right panel:
Frame 1: Section 1
Frame 2: Section 2
Frame 3: Section 3
Applying scroll variants
Go back to the text component and add a Scroll Variant Effect for each trigger section:
When Section 2 enters the viewport, switch to Variant 2.
When Section 3 enters the viewport, switch to Variant 3.
Set the trigger effect to activate when the middle of the viewport is reached.
Now, as you scroll, the text highlight changes dynamically.
Lastly trigger frames don’t need to be visible in the final design:
Select all trigger frames and set their opacity to 0.
Creating scroll variant effect triggered with section in view.
Creating scroll variant effect triggered with section in view.
Creating scroll variant effect triggered with section in view.
The final animation
Preview your design! (Here’s the demo page.) The text sticks to the top of the viewport as you scroll, and the highlighted section changes seamlessly. When you reach the footer, the text scrolls away.
Wrapping up
Great job! You’ve created an Apple-style text reveal on scroll in Framer—without writing a single line of code.
See you in the next one friend :)
The final animation
Preview your design! (Here’s the demo page.) The text sticks to the top of the viewport as you scroll, and the highlighted section changes seamlessly. When you reach the footer, the text scrolls away.
Wrapping up
Great job! You’ve created an Apple-style text reveal on scroll in Framer—without writing a single line of code.
See you in the next one friend :)
The final animation
Preview your design! (Here’s the demo page.) The text sticks to the top of the viewport as you scroll, and the highlighted section changes seamlessly. When you reach the footer, the text scrolls away.
Wrapping up
Great job! You’ve created an Apple-style text reveal on scroll in Framer—without writing a single line of code.
See you in the next one friend :)
