Animated Text
Anne Lee

Overview
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.
Live Demo
Download the Example File to view the live demo and code.
Usage
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.
Components and Properties
Middle Reveal
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 |
Background
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 |
Top Reveal
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 |
Jump
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 |
Color
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 |
Blur
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 |
Rotate
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 |
Fly
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 |
Glitch
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 |
Word
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 |
Version History
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
Feedback is welcome on any of the following channels.
- Twitter: @anneshlee
- Email: annesohyunlee@gmail.com