@plutonium-js/react-atomic-split NPM

Plutonium react atomic split component

About

An advanced React component that adds staggered animation capabilities to child elements and components. Optionally split child text into animatable component characters and words!

Stagger animate child components, elements, and text
Use pure CSS key frame animations or transitions
Control with commands like 'running', 'paused', 'to', 'from', 'reset', and more
Split and animate text characters, words, and spaces
Create amazing text effects with ease
Perfect for animating and highlighting lists of all types

Bookmarks

Installation

> npm install @plutonium-js/react-atomic-split

:arrow_up_small:

Usage

Module Using ES6...

import AtomicSplit from '@plutonium-js/react-atomic-split';

Or when using CommonJS...

const {AtomicSplit} = require('@plutonium-js/react-atomic-split');

CDN Script Tag Add the component directly to a web page.

<script src="https://cdn.jsdelivr.net/npm/@plutonium-js/react-atomic-split@1/dist/bundle.min.js"></script>

:arrow_up_small:

Create Component

To create a basic Atomic Split component, add the 'AtomicSplit' tag to your JSX. The child content can be any text, elements, or other React components.

   render() {
      return (
         <AtomicSplit>your content here</AtomicSplit>;
      );
   }

:arrow_up_small:

Animate

To animate an Atomic Split component add the animate property. The example below splits the text and stagger animates each character into place with a fade in / slide motion.

render() {
   return <AtomicSplit
      animate = {{
         chrs:{
            transitions:{
               opacity:{from:0, to:1},
               transform:{from:'translateX(30vw)', to:'translateX(0vw)'}
            },
            animation:"2s ease",
            playState:'running',
            stagger:{
               duration:1000,
               easeType:'ease'
            }
         }
      }}
   >Plutonium Split Text!</AtomicSplit>;
}

The example above animates the characters group ('chrs'). A single group or combinations of multiple groups can be animated. Allowable groups include...