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

Links

• Atomic Split Home
  • Documentation
  • API
• Atomic Home

Bookmarks

• Installation
• Usage
  • Module
  • CDN Script Tags
• Create Component
• Animate

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...

• root - The root compnoent element.
• all - All child nodes, characters, words, and spaces.
• nodes - All child elements and components.
• chrs - All child characters.
• words - All child words.
• spaces - All child spaces.

For additional information on how to define key frames and transitions refer to the base React Atomic documenation�

React Atomic - Key Frames or Transitions

:arrow_up_small:

License

Released under the MIT license

Author: Jesse Dalessio / Plutonium.dev

:arrow_up_small: