React Component to show animated text and objects, built with styled-components.
The Component provides regular animation for common object and some animation effects especially for typography like letters and multi-line text.
View Demo and Playground
Install via npm:
npm i react-moving-text
To use react-moving-text in your react project, wrap the content with a MovingText
component and customize the animation with relevant properties.
import React from 'react'
import MovingText from 'react-moving-text'
const MyAnimatedTypo = () => {
return (
<MovingText
type="animation_type"
duration="1000ms"
delay="0s"
direction="normal"
timing="ease"
iteration="infinite"
fillMode="none">
Content...
</MovingText>
)
}
Property | Corresponding Animation Property | Data Type | Default Value | Property Unit |
---|---|---|---|---|
type |
animation-name |
String |
"blur" | - |
duration |
animation-duration |
String |
"1s" | s or ms |
delay |
animation-delay |
String |
"0s" | s or ms |
direction |
animation-direction |
String |
"alternate" | - |
timing |
animation-timing-function |
String |
"ease" | - |
iteration |
animation-iteration-count |
Number String |
"infinite" | - |
fillMode |
animation-fill-mode |
String |
"none" | - |
-
For entity object and letters
Common effects Fade Flip Slide blur fadeIn flip slideInFromLeft bounce fadeInFromLeft flipIn slideInFromRight effect3D fadeInFromRight flipOut slideOutToLeft flash fadeInFromTop flipSlowDown slideOutToRight float fadeInFromBottom flipFromTop slideInFromTop glowing fadeOut flipToTop slideInFromBottom jelly fadeOutToLeft flipFromBottom slideOutToTop pulse fadeOutToRight flipToBottom slideOutToBottom shadow fadeOutToTop flipFromLeftToCenter spin fadeOutToBottom swing Fold Hang Zoom Pop fold hangOnLeft zoomIn popIn unfold hangOnRight zoomOut popOut Rotate Shake Squeeze rotateSlowDown shakeMix squeezeMix rotateCW shakeHorizontal squeezeHorizontal rotateACW shakeVertical squeezeVertical -
For multiline texts
typewriter
An string-arry of animation names is used to wrap the animations you want to chain.
import React, { useState } from 'react'
import MovingText from 'react-moving-text'
const AnimationsForChaining = ["swing", "flipSlowDown", "fadeOutToBottom", "jelly"]
const AnimationChain = () => {
const [ animationIndex, setAnimationIndex ] = useState(0)
const [ animationType, setAnimationType ] = useState(AnimationsForChaining[0])
const handleChainAnimation = () => {
setCounter(animationIndex+1)
setAnimationType(selectedItems[animationIndex+1])
}
return (
<MovingText
onAnimationEnd={handleChainAnimation}
type={animationType}
duration="1000ms"
timing="linear"
iteration={1}>
MovingText
</MovingText>
)
}