Component
Rolling Text Component for Framer
This is a Framer component that creates a rolling hover effect for text layers, where each letter moves up and down in a staggered way, one after another. It can be a cool, subtle hover effect for your call-to-action buttons. Feel free to copy the component to your project, check out the demo by remixing, and have fun playing around with it.
Created by
About the resource
To use this component you just need to copy and paste it onto your Framer website, and start customizing it on the right properties panel.
About the resource
To use this component you just need to copy and paste it onto your Framer website, and start customizing it on the right properties panel.
About the resource
To use this component you just need to copy and paste it onto your Framer website, and start customizing it on the right properties panel.
The component properties of the Rolling Text.
The component properties of the Rolling Text.
The component properties of the Rolling Text.
As you can see in the image above, the component has a bunch of properties that you can go through to customize how it looks and feels. You can change the text, the color, the transition time, and you can also play the effect in reverse.
One important thing I want to mention here is how the hover effect is triggered. Since the rolling effect starts as you hover over the area of the component, you need to use a clever structure to use it within buttons.
If you don't pay attention and the Rolling Text component isn't filling up the width and height of the button, it won't trigger as you hover over the button.
What I did in the demo project (which I highly encourage you to remix) is that I applied the padding to the Rolling Text component instead of the button, and set the button component to fit the width and height.
As you can see in the image above, the component has a bunch of properties that you can go through to customize how it looks and feels. You can change the text, the color, the transition time, and you can also play the effect in reverse.
One important thing I want to mention here is how the hover effect is triggered. Since the rolling effect starts as you hover over the area of the component, you need to use a clever structure to use it within buttons.
If you don't pay attention and the Rolling Text component isn't filling up the width and height of the button, it won't trigger as you hover over the button.
What I did in the demo project (which I highly encourage you to remix) is that I applied the padding to the Rolling Text component instead of the button, and set the button component to fit the width and height.
As you can see in the image above, the component has a bunch of properties that you can go through to customize how it looks and feels. You can change the text, the color, the transition time, and you can also play the effect in reverse.
One important thing I want to mention here is how the hover effect is triggered. Since the rolling effect starts as you hover over the area of the component, you need to use a clever structure to use it within buttons.
If you don't pay attention and the Rolling Text component isn't filling up the width and height of the button, it won't trigger as you hover over the button.
What I did in the demo project (which I highly encourage you to remix) is that I applied the padding to the Rolling Text component instead of the button, and set the button component to fit the width and height.
The button component that wraps the Rolling Text component.
The button component that wraps the Rolling Text component.
The button component that wraps the Rolling Text component.
As you can see in the image above, the Rolling Text component fully takes up the width and height of the button, making sure you see the rolling effect as soon as you hover over the button.
As you can see in the image above, the Rolling Text component fully takes up the width and height of the button, making sure you see the rolling effect as soon as you hover over the button.
As you can see in the image above, the Rolling Text component fully takes up the width and height of the button, making sure you see the rolling effect as soon as you hover over the button.
