Animated Text Letters

Animate each letter in your text with a simple 0 dependencies React.js component.

Access the live demo here https://lnardon.github.io/AnimatedText and try different configurations.

Install

npm install animated-text-letters

The package comes with 13 animations:

• fade-in
• pop-up
• slide-up
• slide-down
• slide-left
• slide-right
• rotate-clockwise
• rotate-counter-clockwise
• reveal-up
• reveal-down
• reveal-left
• reveal-right
• random

Usage

import AnimatedText from "animated-text-letters";
import "animated-text-letters/index.css";

<AnimatedText
  text="Animated Text Demo"
  animation="slide-down"
  delay={32}
  easing="ease"
  transitionOnlyDifferentLetters={true}
  animationDuration={1000}
/>;

| Prop | Type | Default Value | Description | | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------------- | | text | string | Required | The text string to be animated. This prop is required and does not have a default value. | | animation | "fade-in""pop-up""slide-up""slide-down""slide-left""slide-right""rotate-clockwise""rotate-counter-clockwise""random" | "fade-in" | Specifies the animation type. Choose from fade-in, pop-up, slide directions, rotate directions, or random. | | delay | number | 32 | The delay between each letter animation, in milliseconds. | | easing | "linear""ease""ease-in""ease-out""ease-in-out"or custom CSS values | "ease" | Defines the acceleration curve for the animation, for natural or dynamic movements. | | transitionOnlyDifferentLetters | boolean | false | If true, animation applies only to letters that change when the text prop updates. | | animationDuration | number | 1000 | The duration of the entire text animation, in milliseconds. |