Guide
- Text Shimmer
- Effects
Guide
- Text Shimmer
- Effects
Guide
- Text Shimmer
- Effects
How to Create a Text Shimmer Effect in Framer
In this quick tutorial, I’ll walk you through how to create a smooth, animated shimmer effect in Framer without writing a single line of code.
Posted by
Nandi
Table of contents
Add your text
Start by hitting T on your keyboard and clicking anywhere on the canvas. This will create a text layer-type in whatever text you want to animate. Think of this as your base layer for the shimmer.
Wrap it in a stack
Next, select the text and wrap it in a Stack by pressing Shift + C. This will make the layout responsive, so if the text changes size, the stack will update too. Clean and flexible.
Convert the stack to a component
Time to create the shimmer magic. Select the stack and press Option + Command + K to turn it into a Component. Name it something like “Shimmer” so you can find it easily later.
Add your text
Start by hitting T on your keyboard and clicking anywhere on the canvas. This will create a text layer-type in whatever text you want to animate. Think of this as your base layer for the shimmer.
Wrap it in a stack
Next, select the text and wrap it in a Stack by pressing Shift + C. This will make the layout responsive, so if the text changes size, the stack will update too. Clean and flexible.
Convert the stack to a component
Time to create the shimmer magic. Select the stack and press Option + Command + K to turn it into a Component. Name it something like “Shimmer” so you can find it easily later.
Add your text
Start by hitting T on your keyboard and clicking anywhere on the canvas. This will create a text layer-type in whatever text you want to animate. Think of this as your base layer for the shimmer.
Wrap it in a stack
Next, select the text and wrap it in a Stack by pressing Shift + C. This will make the layout responsive, so if the text changes size, the stack will update too. Clean and flexible.
Convert the stack to a component
Time to create the shimmer magic. Select the stack and press Option + Command + K to turn it into a Component. Name it something like “Shimmer” so you can find it easily later.
Creating the component.
Creating the component.
Creating the component.
Inside this component, you’ll now create two variants.
Set up the shimmer layers
In Variant 1, duplicate your text layer and set the duplicate to Absolute Positioning. Make sure it’s pinned to the left side so it sits directly on top of the original.
Name the bottom text “Gray”
Name the top one “White”
Now change the color of the top text (the white one) to whatever shimmer color you want to animate. This is the one that will glide across the base layer.
Mask the white text
Here’s where the shimmer starts to come to life.
Select the white text layer
Go to Styles → Mask
Choose a Linear Mask
Rotate it slightly and add three gradient points:
First: 0% then second: 100% and third: 0% again.
Try keep it to only 3 points.
Now shift the gradient points off to the left. This will define the shimmer’s starting position.
Inside this component, you’ll now create two variants.
Set up the shimmer layers
In Variant 1, duplicate your text layer and set the duplicate to Absolute Positioning. Make sure it’s pinned to the left side so it sits directly on top of the original.
Name the bottom text “Gray”
Name the top one “White”
Now change the color of the top text (the white one) to whatever shimmer color you want to animate. This is the one that will glide across the base layer.
Mask the white text
Here’s where the shimmer starts to come to life.
Select the white text layer
Go to Styles → Mask
Choose a Linear Mask
Rotate it slightly and add three gradient points:
First: 0% then second: 100% and third: 0% again.
Try keep it to only 3 points.
Now shift the gradient points off to the left. This will define the shimmer’s starting position.
Inside this component, you’ll now create two variants.
Set up the shimmer layers
In Variant 1, duplicate your text layer and set the duplicate to Absolute Positioning. Make sure it’s pinned to the left side so it sits directly on top of the original.
Name the bottom text “Gray”
Name the top one “White”
Now change the color of the top text (the white one) to whatever shimmer color you want to animate. This is the one that will glide across the base layer.
Mask the white text
Here’s where the shimmer starts to come to life.
Select the white text layer
Go to Styles → Mask
Choose a Linear Mask
Rotate it slightly and add three gradient points:
First: 0% then second: 100% and third: 0% again.
Try keep it to only 3 points.
Now shift the gradient points off to the left. This will define the shimmer’s starting position.
Setting only 3 gradient points.
Setting only 3 gradient points.
Setting only 3 gradient points.
Animate the mask
Duplicate the variant to create Variant 2. In this one, select the white text layer again and move the gradient mask to the right. Keeping roughly the same spacing between the three points.
From a glance, it’ll look like nothing changed. But behind the scenes, the mask has moved, and that’s what gives us our shimmer.
Set the animation
Now let’s connect the two variants:
Select Variant 1, press L, and link it to Variant 2
Set the animation to trigger “On Appear” so it starts automatically
Add a short delay (like 1 second)
Open the interaction settings and set the Transition to Cycle
Boom, you now have a shimmering text that loops back and forth.
Animate the mask
Duplicate the variant to create Variant 2. In this one, select the white text layer again and move the gradient mask to the right. Keeping roughly the same spacing between the three points.
From a glance, it’ll look like nothing changed. But behind the scenes, the mask has moved, and that’s what gives us our shimmer.
Set the animation
Now let’s connect the two variants:
Select Variant 1, press L, and link it to Variant 2
Set the animation to trigger “On Appear” so it starts automatically
Add a short delay (like 1 second)
Open the interaction settings and set the Transition to Cycle
Boom, you now have a shimmering text that loops back and forth.
Animate the mask
Duplicate the variant to create Variant 2. In this one, select the white text layer again and move the gradient mask to the right. Keeping roughly the same spacing between the three points.
From a glance, it’ll look like nothing changed. But behind the scenes, the mask has moved, and that’s what gives us our shimmer.
Set the animation
Now let’s connect the two variants:
Select Variant 1, press L, and link it to Variant 2
Set the animation to trigger “On Appear” so it starts automatically
Add a short delay (like 1 second)
Open the interaction settings and set the Transition to Cycle
Boom, you now have a shimmering text that loops back and forth.
Text shimmer effect.
Text shimmer effect.
Text shimmer effect.
Final touches
You can fine-tune the animation speed by adjusting the transition duration, something like 0.8 seconds works great for a smooth shimmer.
And that’s it! You’ve just made a super clean, no-code shimmer effect right inside Framer.
If you want a head start, here’s a remix link for you.
Final touches
You can fine-tune the animation speed by adjusting the transition duration, something like 0.8 seconds works great for a smooth shimmer.
And that’s it! You’ve just made a super clean, no-code shimmer effect right inside Framer.
If you want a head start, here’s a remix link for you.
Final touches
You can fine-tune the animation speed by adjusting the transition duration, something like 0.8 seconds works great for a smooth shimmer.
And that’s it! You’ve just made a super clean, no-code shimmer effect right inside Framer.
If you want a head start, here’s a remix link for you.
