How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
Interaction
This is a hover text repeat effect recreated in Framer, from the interaction on the Dragonfly website. Remix the project to explore how the repeating text hover animation is built and see how far you can push interactive text effects without writing any code.
To create this hover interaction, I layer multiple text elements on top of each other and wrap them inside individual frames. I then apply the Parallax Floating component to each layer, progressively increasing the speed values to create separation between the text layers, while gradually decreasing the smoothing so the motion feels more responsive. With the direction set to away, this setup produces the repeating hover movement and depth effect that closely recreates the original interaction in the website.
To create this hover interaction, I layer multiple text elements on top of each other and wrap them inside individual frames. I then apply the Parallax Floating component to each layer, progressively increasing the speed values to create separation between the text layers, while gradually decreasing the smoothing so the motion feels more responsive. With the direction set to away, this setup produces the repeating hover movement and depth effect that closely recreates the original interaction in the website.
To create this hover interaction, I layer multiple text elements on top of each other and wrap them inside individual frames. I then apply the Parallax Floating component to each layer, progressively increasing the speed values to create separation between the text layers, while gradually decreasing the smoothing so the motion feels more responsive. With the direction set to away, this setup produces the repeating hover movement and depth effect that closely recreates the original interaction in the website.
The hover text layers with parallax floating component in Framer.
The hover text layers with parallax floating component in Framer.
The hover text layers with parallax floating component in Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
