https://github.com/lnardon/animatedtext

A React.js component to add animation to your text letters. Available as a npm package.
https://github.com/lnardon/animatedtext

animation css javascript keyframes-animation letters npm package reactjs text-animation typescript

Last synced: 8 days ago
JSON representation

A React.js component to add animation to your text letters. Available as a npm package.

• Host: GitHub
• URL: https://github.com/lnardon/animatedtext
• Owner: lnardon
• Created: 2023-10-31T23:31:01.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-17T23:34:38.000Z (2 months ago)
• Last Synced: 2024-09-19T00:34:49.278Z (2 months ago)
• Topics: animation, css, javascript, keyframes-animation, letters, npm, package, reactjs, text-animation, typescript
• Language: CSS
• Homepage: https://lnardon.github.io/AnimatedText/
• Size: 8.83 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# **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**

```bash

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

```tsx

import AnimatedText from "animated-text-letters";

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

;

```

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