react-punch
react-punch copied to clipboard
solidsnail
A kinetic typography library for ReactJS
A kinetic typography library for ReactJS
0.1.0
Demos made
 |
|---|
| Author: Me |
| Link: https://mqkqw2n9qx.codesandbox.io/ |
Usage
npm i react-punch
import { animateText, samples } from "react-punch";
<b>{animateText("Hello World!",samples.emphasis.bounce(10, "ease-out", 1000, "infinite"),100)}</b>
API
animateClass
Triggers the animation on mount
<div
className={animateClass({
frames:{
from: { opacity: 0, transform: "scale(0,0)" },
to: { opacity: 1, transform: "scale(1,1)" },
},
easing: "cubic-bezier(0.0, 0.06, 0.05, 0.95)"
})}
/>
Triggers the animation on hover
const [hover , setHover] = useState(false);
<div
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
className={hover && animateClass({
frames:{
from: { opacity: 0, transform: "scale(0,0)" },
to: { opacity: 1, transform: "scale(1,1)" },
},
easing: "cubic-bezier(0.0, 0.06, 0.05, 0.95)"
})}
/>
animateElement
Triggers a succession of animations using a Promise
useEffect(() => {
const ballA = document.getElementById("ballA");
const ballB = document.getElementById("ballB");
animateElement(
ballA,
{frames: {to: {transform: "translateX(100px)"}}}
).then(() => {
animateElement(
ballB,
{ frames: { to: { transform: "translateX(200px)" } } }
)
});
}, []);
<div id="ballA" />
<div id="ballB" />
Or using simply the duration on the delay property
useEffect(() => {
const ballA = document.getElementById("ballA");
const ballB = document.getElementById("ballB");
animateElement(
ballA,
{frames: {to: {transform: "translateX(100px)"}}, duration: 1000}
);
animateElement(
ballB,
{frames: {to: {transform: "translateX(200px)"}}, delay: 1000}
)
}, []);
<div id="ballA" />
<div id="ballB" />
animateText
Triggers an animation on each letter of the text
<b>{animateText("Hello World!", samples.emphasis.rubber(), 500)}</b>
Or on the whole word
<b>{animateText("Hello World!", samples.emphasis.rubber(), 0)}</b>
AnimationGroup
A component that toggles an animation on its children according to the show property
const [show , setShow] = useState(false);
<button onClick={() => setShow(!show)}>Toggle</button>
<AnimationGroup timeout={0} show={show}><div /></AnimationGroup>
Samples
Entrance
Fade
<b>{animateText("Hello World!",samples.entrance.fade())}</b>
Flyin
<b>{animateText("Hello World!",samples.entrance.flyin())}</b>
Split
<b>{animateText("Hello World!",samples.entrance.split())}</b>
Wipe
<b>{animateText("Hello World!",samples.entrance.wipe())}</b>
Shape
<b>{animateText("Hello World!",samples.entrance.shape())}</b>
Zoom
<b>{animateText("Hello World!",samples.entrance.zoom())}</b>
Flip
<b>{animateText("Hello World!",samples.entrance.flip())}</b>
Slide
<b>{animateText("Hello World!",samples.entrance.slide())}</b>
Exit
Fade
<b>{animateText("Hello World!",samplesexit.fade())}</b>
Flyin
<b>{animateText("Hello World!",samplesexit.flyin())}</b>
Split
<b>{animateText("Hello World!",samplesexit.split())}</b>
Wipe
<b>{animateText("Hello World!",samplesexit.wipe())}</b>
Shape
<b>{animateText("Hello World!",samplesexit.shape())}</b>
Zoom
<b>{animateText("Hello World!",samplesexit.zoom())}</b>
Flip
<b>{animateText("Hello World!",samplesexit.flip())}</b>
Slide
<b>{animateText("Hello World!",samplesexit.slide())}</b>
Text
Rainbow
<b>{animateText("Hello World!",samples.text.rainbow())}</b>
Gradient
<b>{animateText("Hello World!",samples.text.gradient())}</b>
Other
Draw border
<b>{animateText("Hello World!",samples.other.drawborder())}</b>
solidsnail