1.0.1 • Published 12 months ago
react-animate-z v1.0.1
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.
WrapBlock: div
Installation
Install via npm:
npm i react-animate-z
Usage
To use react-animate-z in your react project, wrap the content with a Animate
component and customize the animation with relevant properties.
import Animate from 'react-animate-z'
const DelpiAnimate = () => {
return (
<Animate
type="blur"
duration="1000ms"
delay="0s"
direction="normal"
timing="ease"
iteration="infinite"
fillMode="none">
Content...
</Animate>
)
}
Available properties
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" | - |
Available animations name (see mapping)
type / Animation name |
---|
blur |
fadeIn |
fadeOut |
hang |
hangOnLeft |
hangOnRight |
swing |
glowing |
shakeMix |
shakeHorizontal |
shakeVertical |
spin |
bounce |
flipCenterToRight |
flipFromLeftToCenter |
flash |
pulse |
jelly |
squeezeHorizontal |
squeezeVertical |
flipHorizontal |
flipVertical |
Chain Animation
An string-arry of animation names is used to wrap the animations you want to chain.
import Animate from 'react-animate-z'
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 (
<Animate
onAnimationEnd={handleChainAnimation}
type={animationType}
duration="1000ms"
timing="linear"
iteration={1}>
Animate
</Animate>
)
}
animation type - mapping name
// props: type
"blur"
"bounce"
"effect3D"
"flash"
"float"
"glowing"
"jelly"
"pulse"
"shadow"
"spin"
"swing"
"fadeIn"
"fadeInFromLeft"
"fadeInFromRight"
"fadeInFromTop"
"fadeInFromBottom"
"fadeOut"
"fadeOutToLeft"
"fadeOutToRight"
"fadeOutToTop"
"fadeOutToBottom"
"flip"
"flipIn"
"flipOut"
"flipSlowDown"
"flipFromTop"
"flipToTop"
"flipFromBottom"
"flipToBottom"
"flipFromLeftToCenter"
"fold"
"unfold"
"hangOnLeft"
"hangOnRight"
"rotateSlowDown"
"rotateCW"
"rotateACW"
"shakeMix"
"shakeHorizontal"
"shakeVertical"
"squeezeMix"
"squeezeHorizontal"
"squeezeVertical"
"slideInFromLeft"
"slideInFromRight"
"slideOutToLeft"
"slideOutToRight"
"slideInFromTop"
"slideInFromBottom"
"slideOutToTop"
"slideOutToBottom"
"zoomIn"
"zoomOut"
"popIn"
"popOut"
animation type name: typewriter
// import { AnimateTyping } from 'react-animate-z';
<Animate
type="typewriter"
// props
typingWrite={{
dataText: ["Sushi", "Pizza", "Brötchen", "Salat"],
// heading?: string;
// className?: string;
// dataText?: string[];
}}
/>
// or
<AnimateTyping
dataText ={["Sushi", "Pizza", "Brötchen", "Salat"]}
// heading?: string;
// className?: string;
// dataText?: string[];
/>
License
MIT