LetterFX

LetterFX is a lightweight JavaScript/TypeScript library for creating dynamic, letter by letter animations. With customizable effects, you can animate text with ease, making your content more engaging and interactive. Using LetterFX you can add dynamic text effects to web pages with minimal effort.

Features

• Animate text letter by letter.
• Loop animations with custom timings.
• Customizable transition effects, easing, and delays.
• Easy integration with JavaScript or TypeScript.

Installation

Install from NPM

We can install LetterFX using npm:

npm install letterfx

import LetterFX from "letterfx";

Using CDN

You can directly use LetterFX in your ptoject using a CDN link

<script src="https://cdn.jsdelivr.net/npm/letterfx/dist/letterfx.min.js"></script>

Git Repository: https://github.com/MoncyDev/LetterFX/

Basic Usage

const TextAnimation = new LetterFX(container, options); // All LetterFX options are optional

Here’s a basic example of how to use LetterFX:

const letter = new LetterFX(".text", {
  transition: 500,
  delay: 30,
  clip: true,
  blur: "20px",
  opacity: 0.5,
  loop: true,
  interval: 2000,
  animateIn: "translateY(100%) rotate(40deg) scale(0)",
  animateOut: "translateX(-100%) scale(0)",
});

HTML :

<div class="text">LetterFX Animations</div>

Options:

| Option | Type | Default | Description | | ------------ | ------- | ---------------------------------------- | ------------------------------------------------------- | | transition | Number | 500 | Duration of each animation (in ms). | | delay | Number | 40 | Delay between animating each letter (in ms). | | clip | Boolean | false | Adds an overflow clip for each letter during animation. | | easing | String | "cubic-bezier(0.09, 1.01, 0.68, 1.16)" | CSS easing function for transitions. | | animateIn | String | "translateY(100%)" | Transform properties for initial animation. | | animateOut | String | "translateY(-100%)" | Transform properties for exit animation. | | loop | Boolean | false | Enables continuous looping of the animation. | | interval | Number | 4000 | Time interval between loop cycles (in ms). | | opacity | Number | 0 | Initial opacity of letters during animation. | | blur | String | "0px" | Initial blur of letters during animation. |

License

This project is licensed under the MIT License - see the LICENSE file for details.