This npm package provides components and methods for convenient creation of animated texts and characters.
https://codesandbox.io/s/animatedtxt-0s5259
npm i animatedtxt
Importing components:
import { Phrase, Char } from 'animatedtxt';
Creating single character:
<Char char='A' />
Grouping multiple characters into a phrase
<Phrase>
<Char char='A' />
<Char char='B' />
<Char char='C' />
</Phrase>
You can also provide your custom definition of the character for the <Char>
component:
// 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
<Char char={customH} font='basic-thin' size={500} delay={1} />;
Behavior and design of a single character (not embedded into a phrase) can be modified by passing following props:
- char
<string>
- character to be rendered. Each font has its own limitations for allowed characters. - delay?
<number>
- number of seconds by which the start of animation will be delayed. Default value: 0. - duration?
<number>
- duration of the animation in seconds. Default value: 1. - color?
<string>
- definition of the color of the character. Should be in format accepted by CSS standards. Default value: #000000. - size?
<number>
- size of the character in "px" unit. Default value: 100. - font?
<string>
- 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 foranimation-timing-function
property. If not provided thenlinear
function is used. - isReversed?
<boolean>
- flag that determines whether animation should be reversed. Iftrue
, animation is played backwards thus the character is disappearing. Default value:false
.
Example:
<Char
char='A'
delay={1.5}
duration={0.8}
color='#6600cc'
size={300}
font='basic-thin'
cubicBezier={[0.68, 0.04, 0.45, 0.98]}
/>
Behavior and design of characters grouped in the phrase can be modified by passing following props:
- margin?
<number>
- number of pixel "px" units between characters in a phrase. Default value: 0. - color?
<string>
- 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?
<string>
- size of the characters in "px" unit. Default value: 100. Value overwrites size value of all children elements. - duration?
<number>
- duration of the animation in seconds. Default value: 1. Value is overwritten by the value defined in the character element. - delay?
<number>
- number of seconds by which the start of the phrase animation will be delayed. When specified, this value is added to the delay of eachChar
component within thePhrase
. Default value: 0. - font?
<string>
- 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 foranimation-timing-function
property. If not provided thenlinear
function is used. Value is overwritten by the value defined in the character element. - isReversed?
<boolean>
- flag that determines whether animation should be reversed. Iftrue
, animation is played backwards thus the character is disappearing. Default value:false
. Value overrides children property.
Example:
<Phrase
color='#6600cc'
margin={50}
size={200}
duration={1.1}
font='basic-thin'
cubicBezier={[0.68, 0.04, 0.45, 0.98]}
>
<Char char='A' />
<Char char='B' />
...
</Phrase>