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>