Component
Text Wave Component for Framer
This is a text wave animation for Framer, inspired by one of the Apple dynamic island interactions showcased on Design Spells. It creates a smooth, flowing wave effect that animates across letters or words. Just copy and paste it into your project to start experimenting.
Created by
About the resource
The text wave component allows you to customize how the wave affects your text. You can animate by each letter or word, control the wave’s width, and adjust the scale of the text at the center of the wave. The Origin option lets you choose whether the scaling starts from the bottom or center of the text, and Resize determines if surrounding text shifts when scaling occurs.
You can set the animation speed, loop it infinitely, and trigger it when the text appears in view, similar to Framer’s appear effects. A delay option is also available before the animation starts, and it applies between loops if enabled.
About the resource
The text wave component allows you to customize how the wave affects your text. You can animate by each letter or word, control the wave’s width, and adjust the scale of the text at the center of the wave. The Origin option lets you choose whether the scaling starts from the bottom or center of the text, and Resize determines if surrounding text shifts when scaling occurs.
You can set the animation speed, loop it infinitely, and trigger it when the text appears in view, similar to Framer’s appear effects. A delay option is also available before the animation starts, and it applies between loops if enabled.
About the resource
The text wave component allows you to customize how the wave affects your text. You can animate by each letter or word, control the wave’s width, and adjust the scale of the text at the center of the wave. The Origin option lets you choose whether the scaling starts from the bottom or center of the text, and Resize determines if surrounding text shifts when scaling occurs.
You can set the animation speed, loop it infinitely, and trigger it when the text appears in view, similar to Framer’s appear effects. A delay option is also available before the animation starts, and it applies between loops if enabled.
The text wave component properties in Framer.
The text wave component properties in Framer.
The text wave component properties in Framer.
