# txtanime.js
> It is a JavaScript library, which contains many beautiful and free text effects.
Latest version **1.7.0** (published 2024-02-07) · ISC license · 0 weekly downloads
## Install
```sh
npm install txtanime.js
pnpm add txtanime.js
yarn add txtanime.js
bun add txtanime.js
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.7.0 |
| Published | 2024-02-07 |
| First published | 2021-12-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 96 |
| Author | Mohamed Frindi |
| Maintainers | mohamedfrindi |
| Keywords | javascript, plugin, js plugin, animation, css animation, javascript animation, txt anime, TxtAnime, text animation, text animation css, text animation javascript |
## Links
- npm: https://www.npmjs.com/package/txtanime.js
- Repository: https://github.com/mohamedfrindi/TxtAnime.js
- Homepage: https://github.com/mohamedfrindi/TxtAnime.js#readme
- Issues: https://github.com/mohamedfrindi/TxtAnime.js/issues
- npm.io page: https://npm.io/package/txtanime.js
## Dependencies (1)
- [gsap](https://npm.io/package/gsap.md) ^3.11.2
## Alternatives
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads
- [react-scroll-snap-anime-slider](https://npm.io/package/react-scroll-snap-anime-slider.md) — 214 weekly downloads
## Recent versions
- 1.7.0 (latest) — 2024-02-07
- 1.6.0 — 2023-05-19
- 1.4.0 — 2022-09-01
- 1.3.0 — 2022-09-01
- 1.2.0 — 2022-09-01
- 1.1.0 — 2022-08-31
- 1.0.8 — 2022-08-28
- 1.0.7 — 2021-12-13
- 1.0.6 — 2021-12-12
- 1.0.5 — 2021-12-11
- 1.0.4 — 2021-12-11
- 1.0.3 — 2021-12-10
- 1.0.2 — 2021-12-10
- 1.0.1 — 2021-12-09
- 1.0.0 — 2021-12-08
## README
# TxtAnime.js
It is a JavaScript library, which contains many beautiful and free text effects.
# Installation
### npm
````
npm install txtanime.js
````
````javascript
// ES 2015
import { TxtAnime } from "txtanime.js";
// CommonJs
const { TxtAnime } = require('txtanime.js');
````
#### CDN
````html
````
##### Put the JS file at the end of the body tag:
````html
````
##### Add the element you want to apply the effect to
````html
Animation
````
##### To run TxtAnime.Js just add the following code in your script:
````javascript
new TxtAnime(".element" , {
// options
})
````
## Options
````javascript
new TxtAnime('.element',{
// selector element
// Accepts a string or selector element
// You can specify a class directly || new TxtAnime('.element // .elements')
// Or you can add a javascript selector || document.querySelector('.element') or document.querySelectorAll('.elements')
effect : 'txt-an-1',
// Select the effect you want
// Accepts 10 options : txt-an-1 <== 1-9
// Data Type : string
delayStart: 0,
// Determining the start time of the effect
// delayStart : 0s | second
// Data Type : number
delay : 0.05,
// Determine when to move between items
// delay : 0.5s | second
// Data Type : number
duration: 0.7,
// Determine the speed of effect
// duration : 0.7s | second
// Data Type : number
repeat : true,
// To repeat the effect infinitely
// accept 2 options : true | false
// Data Type : boolean
repeatDelay : 2,
// Replay the effect after
// repeatDelay : 2s | second
// Data Type : number
overlayBackground : "#004",
// background color overlay
// Accepts option : color
// Data Type : string
text : ['Go' , 'To' , 'Site'],
// The words you want to apply the effect to
// Accepts option : array
// Data Type : array
});
// ----------------------------------------------------------------
// default options ------------------------------------------------
// txt-an-1
new TxtAnime(".element" , {
effect: "txt-an-1",
delayStart: 0,
delay: 0.07,
duration: 0.7,
repeat: true,
repeatDelay: 1,
})
// txt-an-2
new TxtAnime(".element" , {
effect: "txt-an-2",
delayStart: 0,
delay: 0.5,
duration: 0.7,
repeat: true,
repeatDelay: 3,
})
// txt-an-3
new TxtAnime(".element" , {
effect: "txt-an-3",
delayStart: 0,
delay: 0.1,
duration: 0.1,
repeat: true,
repeatDelay: 2,
})
// txt-an-4
new TxtAnime(".element" , {
effect: "txt-an-4",
delayStart: 0,
delay: 0,
duration: 1,
repeat: true,
text: ["Go", "To", "Site"],
})
// txt-an-5
new TxtAnime(".element" , {
effect: "txt-an-5",
delayStart: 0,
delay: 0,
duration: 1,
repeat: true,
text: ["Go", "To", "Site"],
})
// txt-an-6
new TxtAnime(".element" , {
effect: "txt-an-6",
delayStart: 0,
delay: 0.07,
duration: 2,
repeat: true,
repeatDelay: 3,
overlayBackground: "#03a9f4",
})
// txt-an-7
new TxtAnime(".element" , {
effect: "txt-an-7",
delayStart: 0,
delay: 0.05,
duration: 0.07,
repeat: true,
text: ["Try", "Free", "Typed"],
})
// txt-an-8
new TxtAnime(".element" , {
effect: "txt-an-8",
delayStart: 0,
delay: 0.05,
duration: 0.02,
repeat: true,
text: ["Designer", "Developer" , "Freelancer"],
})
// txt-an-9
new TxtAnime(".element" , {
effect: "txt-an-9",
delayStart: 0,
delay: 1,
duration: 0.5,
repeat: true,
text: ["Desinger", "Developer", "Freelancer"],
})
````
---
_Source: https://npm.io/package/txtanime.js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._