Animated Text

Anne Lee

Open in Framer X

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
Opening Package in Framer X...

Don’t have Framer X yet?Start your Free Trial

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree