Component
Staggered Text Hover in Framer
This is a recreation of Rauno Freiberg's staggered text hover effect, built entirely in Framer. Hover over the button and watch as each letter transforms in 3D space, creating a playful ripple effect. It's a great example of how you can achieve complex interactions in Framer without touching a line of code.
About the resource
To create this effect in Framer, you need to handle each letter of the text individually. In this case, I created a setup where each letter is wrapped in a Frame. Inside each Frame, I have multiple layers of the same character, each with a different 3D transform (we'll change these later in the hover variant).
If you haven't mastered 3D transforms yet, make sure to check out my free crash course on it.
About the resource
To create this effect in Framer, you need to handle each letter of the text individually. In this case, I created a setup where each letter is wrapped in a Frame. Inside each Frame, I have multiple layers of the same character, each with a different 3D transform (we'll change these later in the hover variant).
If you haven't mastered 3D transforms yet, make sure to check out my free crash course on it.
About the resource
To create this effect in Framer, you need to handle each letter of the text individually. In this case, I created a setup where each letter is wrapped in a Frame. Inside each Frame, I have multiple layers of the same character, each with a different 3D transform (we'll change these later in the hover variant).
If you haven't mastered 3D transforms yet, make sure to check out my free crash course on it.
The layer structure I have for each letter of the text.
The layer structure I have for each letter of the text.
The layer structure I have for each letter of the text.
Then, to make sure these letters are actually animated, we turn the button into a component and create a hover variant for it.
On the hover variant, we modify the 3D transform properties within each "letter block."
Then, to make sure these letters are actually animated, we turn the button into a component and create a hover variant for it.
On the hover variant, we modify the 3D transform properties within each "letter block."
Then, to make sure these letters are actually animated, we turn the button into a component and create a hover variant for it.
On the hover variant, we modify the 3D transform properties within each "letter block."
The component variants of the button.
The component variants of the button.
The component variants of the button.
The staggered effect
Okay, but how do we achieve the staggered effect? By default, every letter will flip at the same time.
Well, we have to go into each of the layers that should be staggered, and we should add a transition property to them where we specify their delay value. Each letter is delayed by a different value, creating a nice staggered effect.
The staggered effect
Okay, but how do we achieve the staggered effect? By default, every letter will flip at the same time.
Well, we have to go into each of the layers that should be staggered, and we should add a transition property to them where we specify their delay value. Each letter is delayed by a different value, creating a nice staggered effect.
The staggered effect
Okay, but how do we achieve the staggered effect? By default, every letter will flip at the same time.
Well, we have to go into each of the layers that should be staggered, and we should add a transition property to them where we specify their delay value. Each letter is delayed by a different value, creating a nice staggered effect.
Adding a delay value to each animated layer's transition property.
Adding a delay value to each animated layer's transition property.
Adding a delay value to each animated layer's transition property.
