Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zendranm/animatedtxt
A React library for creating animated texts and characters.
https://github.com/zendranm/animatedtxt
animated animation character component-library components draw font hacktoberfest react react-components react-library text
Last synced: 3 months ago
JSON representation
A React library for creating animated texts and characters.
- Host: GitHub
- URL: https://github.com/zendranm/animatedtxt
- Owner: zendranm
- License: mit
- Created: 2021-06-16T14:24:37.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-29T19:13:21.000Z (11 months ago)
- Last Synced: 2024-10-19T15:17:56.638Z (4 months ago)
- Topics: animated, animation, character, component-library, components, draw, font, hacktoberfest, react, react-components, react-library, text
- Language: TypeScript
- Homepage: https://codesandbox.io/s/animatedtxt-0s5259
- Size: 1.03 MB
- Stars: 9
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# AnimatedTXT
This [npm package](https://www.npmjs.com/package/animatedtxt) provides components and methods for convenient creation of animated texts and characters.
### Live demo:
https://codesandbox.io/s/animatedtxt-0s5259
# Installation
```
npm i animatedtxt
```
# Usage
Importing components:
```js
import { Phrase, Char } from 'animatedtxt';
```
Creating single character:
```js
```
Grouping multiple characters into a phrase
```js
```
# Custom Char
You can also provide your custom definition of the character for the `` component:
```js
// Some custom definition
const customH: SvgChar = {
svgViewBox: { width: 69, height: 81 },
elements: [
{
elementDelay: 0.0,
shape:
'M 24 10 C 11 3 38 -4 33 7 C 19 36 19 56 13 65 C 1 89 -4 58 12 52 C 35 42 47 35 58 7 C 60 1 51 -4 52 11 C 53 34 37 49 40 76 C 42 92 47 44 68 58',
length: 322.86358642578125,
},
],
offsets: {
left: [0, 0, 0, 0, 0],
right: [0, 0, 0, 0, 0],
},
};
// Example of usage
;
```
# API
## Char:
Behavior and design of a single character (not embedded into a phrase) can be modified by passing following props:
- char `` - character to be rendered. Each font has its own limitations for allowed characters.
- delay? `` - number of seconds by which the start of animation will be delayed. Default value: 0.
- duration? `` - duration of the animation in seconds. Default value: 1.
- color? `` - definition of the color of the character. Should be in format accepted by CSS standards. Default value: #000000.
- size? `` - size of the character in "px" unit. Default value: 100.
- font? `` - name of the font. Each font has different design of characters and may have different characters available. Default value: "basic-bold".
- cubicBezier? `<[number, number, number, number]>` - definition of a Cubic Bezier curve used for `animation-timing-function` property. If not provided then `linear` function is used.
- isReversed? `` - flag that determines whether animation should be reversed. If `true`, animation is played backwards thus the character is disappearing. Default value: `false`.
Example:
```js
```
## Phrase:
Behavior and design of characters grouped in the phrase can be modified by passing following props:
- margin? `` - number of pixel "px" units between characters in a phrase. Default value: 0.
- color? `` - definition of the color of the characters in a phrase. Should be in format accepted by CSS standards. Default value: #000000. Value is overwritten by the color defined in the character element.
- size? `` - size of the characters in "px" unit. Default value: 100. Value overwrites size value of all children elements.
- duration? `` - duration of the animation in seconds. Default value: 1. Value is overwritten by the value defined in the character element.
- delay? `` - number of seconds by which the start of the phrase animation will be delayed. When specified, this value is added to the delay of each `Char` component within the `Phrase`. Default value: 0.
- font? `` - name of the font. Each font has different design of characters and may have different characters available. Default value: "basic-bold". Value overwrites size value of all children elements.
- cubicBezier? `<[number, number, number, number]>` - definition of a Cubic Bezier curve used for `animation-timing-function` property. If not provided then `linear` function is used. Value is overwritten by the value defined in the character element.
- isReversed? `` - flag that determines whether animation should be reversed. If `true`, animation is played backwards thus the character is disappearing. Default value: `false`. Value overrides children property.
Example:
```js
...
```