letterfx v1.0.0

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:

License

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