Anne Lee
Add animated text to your designs for a more dynamic feel. Customize the text
, font color
, font size
, and component specific variables, such as the stagger
or overall duration
of the animations. Powered by Framer Motion.
Download the Example File to view the live demo and code.
Drag and drop any text animation component to your design and customize them on the properties panel to fit your needs. Components will animate when the frame has rendered.
Animates two lines of text that are revealed from the middle.
Property | Type | Description | Default |
---|---|---|---|
First Line | string |
First line of text | First Line |
Second Line | string |
Second line of text | Second Line |
Duration | number |
Duration of animation | 0.4s |
Font Size | number |
Size of font | 26pt |
Color | color |
Color of font | #FFFFFF |
Animates a background for the text with a color of your choice.
Property | Type | Description | Default |
---|---|---|---|
Text | string |
Text to animate | First Line |
Font Size | number |
Size of font | 26pt |
Font Color | color |
Color of font | #000000 |
BG Color | color |
Color of background | #FFFFFF |
Stagger | number |
Stagger between animations | 0.4s |
Animates three lines of text with a decorative line that are staggered from the top.
Property | Type | Description | Default |
---|---|---|---|
First Line | string |
First line of text | First Line |
Second Line | string |
Second line of text | Second Line |
Third Line | string |
Third line of text | Third Line |
Line Gap | number |
Gap between lines | 0px |
Font Size | number |
Size of font | 26pt |
Color | color |
Color of font | #FFFFFF |
Stagger | number |
Stagger for each line | 0.3s |
Duration | number |
Duration for each line | 0.4s |
Animates the text to jump up, letter by letter.
Property | Type | Description | Default |
---|---|---|---|
Text | string |
Text to animate | First Line |
Font Size | number |
Size of font | 26pt |
Color | color |
Color of font | #FFFFFF |
Stagger | number |
Stagger for each letter | 0.06s |
Loops through three different colors with an initial scale down effect.
Property | Type | Description | Default |
---|---|---|---|
Text | string |
Text to animate | First Line |
Font Size | number |
Size of font | 26pt |
First Color | color |
First color to loop through | #8FFFB8 |
Second Color | color |
Second color to loop through | #FFFB0A |
Third Color | color |
Third color to loop through | #A16BFF |
Animates the text to blur in, letter by letter.
Property | Type | Description | Default |
---|---|---|---|
Text | string |
Text to animate | First Line |
Font Size | number |
Size of font | 26pt |
Color | color |
Color of font | #FFFFFF |
Stagger | number |
Stagger for each letter | 0.04s |
Blur | number |
Amount of blur | 10px |
Animates the text to rotate in from the bottom left, letter by letter.
Property | Type | Description | Default |
---|---|---|---|
Text | string |
Text to animate | First Line |
Font Size | number |
Size of font | 26pt |
Color | color |
Color of font | #FFFFFF |
Stagger | number |
Stagger for each letter | 0.06s |
Animates the text to fly in from the right, letter by letter.
Property | Type | Description | Default |
---|---|---|---|
Text | string |
Text to animate | First Line |
Font Size | number |
Size of font | 26pt |
Color | color |
Color of font | #FFFFFF |
Duration | number |
Duration of animation | 0.8s |
Stagger | number |
Stagger for each letter | 0.1s |
Creates a glitchy animate in effect.
Property | Type | Description | Default |
---|---|---|---|
Text | string |
Text to animate | First Line |
Font Size | number |
Size of font | 26pt |
Color | color |
Color of font | #FFFFFF |
Slices | number |
Number of rows | 10 |
Animates the text in, word by word.
Property | Type | Description | Default |
---|---|---|---|
Text | string |
Text to animate | First Line |
Font Size | number |
Size of font | 26pt |
Color | color |
Color of font | #FFFFFF |
Stagger | number |
Stagger for each word | 0.15s |
1.5.0: Fixed bug with components not rendering on the canvas 1.4.0: Updated example file 1.3.0: Updated syntax and example file 1.2.0: Updated property value descriptions 1.0.0: Initial release
Feedback is welcome on any of the following channels.