@plutonium-js/react-atomic-split

1.0.2 • Public • Published

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

Bookmarks

Installation

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

🔼

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>

🔼

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>;
      );
   }

🔼

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

🔼

License

Released under the MIT license

Author: Jesse Dalessio / Plutonium.dev

🔼

Package Sidebar

Install

npm i @plutonium-js/react-atomic-split

Weekly Downloads

5

Version

1.0.2

License

MIT

Unpacked Size

80.1 kB

Total Files

15

Last publish

Collaborators

  • plutonium-js