How to Create an Apple-Style Text Reveal on Scroll

How to Create an Apple-Style Text Reveal on Scroll

  • 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.

image of Nandi Muzsik

Posted by

Nandi

Apple-style text reveal effect demonstrating scroll-triggered animation with component and variant integration
Apple-style text reveal effect demonstrating scroll-triggered animation with component and variant integration
Apple-style text reveal effect demonstrating scroll-triggered animation with component and variant integration

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.

Framer project demonstrating scroll-triggered text reveal using components and multiple variants, created without code

View of Apple-style text reveal animation.

Framer project demonstrating scroll-triggered text reveal using components and multiple variants, created without code

View of Apple-style text reveal animation.

Framer project demonstrating scroll-triggered text reveal using components and multiple variants, created without code

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: 56px

    Height: 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: 56px

    Height: 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: 56px

    Height: Set to fit content

    Width: 720px

Framer editor interface showing customization options for a text reveal component with zero-code design settings

Adjusting text width on right hand side panel.

Framer editor interface showing customization options for a text reveal component with zero-code design settings

Adjusting text width on right hand side panel.

Framer editor interface showing customization options for a text reveal component with zero-code design settings

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 + K to 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 + K to 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 + K to 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.

Framer interface showing sticky position settings for a text reveal element with customizable top and size parameters

Setting sticky positioning on the right hand side panel.

Framer interface showing sticky position settings for a text reveal element with customizable top and size parameters

Setting sticky positioning on the right hand side panel.

Framer interface showing sticky position settings for a text reveal element with customizable top and size parameters

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.

Framer editor showcasing scroll variant settings with options for section triggers, viewport, and variant transitions

Creating scroll variant effect triggered with section in view.

Framer editor showcasing scroll variant settings with options for section triggers, viewport, and variant transitions

Creating scroll variant effect triggered with section in view.

Framer editor showcasing scroll variant settings with options for section triggers, viewport, and variant transitions

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 :)

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More posts

More posts

  • Collage of modern technology items with a horizontal scroll arrow, including a turntable, musical equipment, and a vintage computer

    How to Add Horizontal Scrolling to Framer Sites

    Guide

    Collage of modern technology items with a horizontal scroll arrow, including a turntable, musical equipment, and a vintage computer

    How to Add Horizontal Scrolling to Framer Sites

    Guide

    Collage of modern technology items with a horizontal scroll arrow, including a turntable, musical equipment, and a vintage computer

    How to Add Horizontal Scrolling to Framer Sites

    Guide

  • Interactive chat bubble with emoji reactions and text stating 'Liquid animation? Easy...' with a cursor icon for interaction

    How to Create Fluid Animations in Framer

    Guide

    Interactive chat bubble with emoji reactions and text stating 'Liquid animation? Easy...' with a cursor icon for interaction

    How to Create Fluid Animations in Framer

    Guide

    Interactive chat bubble with emoji reactions and text stating 'Liquid animation? Easy...' with a cursor icon for interaction

    How to Create Fluid Animations in Framer

    Guide

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback