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.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

Feedback is welcome on any of the following channels.

• Twitter: @anneshlee
• Email: annesohyunlee@gmail.com