React Pose has been deprecated in favour of Framer Motion. Read the upgrade guide

React Pose Text

React Pose Text automatically splits strings of text into individual words and/or characters. These can then be animated with the full power of Pose:

• Magic animations
• Stagger across words and characters
• Animate any style property, including color and text-shadow
• Make words and characters individually draggable, or respond to a parent's dragging.
• enter/exit animations with PoseGroup
• Only 1kb!

License

React Pose Text is free for non-profit use under a GPL-v3 license.

A permissive, commercial license is exclusive to backers of the Popmotion Patreon!

Usage

Install

npm install react-pose react-pose-text

SplitText

React Pose Text exports a single component, SplitText.

import SplitText from 'react-pose-text';

export default () => (
  <SplitText>Hello world!</SplitText>
);

Strings wrapped with this component will be split into posed components for every word and character.

Poses can be defined for both words and characters by providing Pose configs to the wordPoses and charPoses props, respectively:

const charPoses = {
  enter: { opacity: 1 },
  exit: { opacity: 0 }
};

export default () => (
  <SplitText charPoses={charPoses}>
    Hello world!
  </SplitText>
);

SplitText acts like a regular posed component, which means we can animate between poses using the pose property:

export default ({ isVisible }) => (
  <SplitText
    charPoses={charPoses}
    pose={isVisible ? 'enter' : 'exit'}
  >
    Hello world!
  </SplitText>
);

It also responds to pose changes further up the tree.

Special pose props

Like normal posed components, all props provided to SplitText are sent through to dynamic pose properties:

const charPoses = {
  enter: { y: 0 },
  exit: { y: ({ initialOffset }) => initialOffset }
};

export default () => (
  <SplitText initialOffset={5} charPoses={charPoses}>
    Hello world!
  </SplitText>
);

But SplitText also provides a series of special props.

Words receive:

• wordIndex
• numWords

Characters receive:

• wordIndex
• numWords
• charIndex
• numChars
• charInWordIndex
• numCharsInWord

You can use these props in various ways, for instance to create a variety of staggering effects by dynamically generating delay:

const charPoses = {
  enter: {
    y: 0,
    delay: ({ charIndex }) => charIndex * 50 
  }
};

Pointer events

You can use Pose's pointer events as usual. For instance, you can make every word draggable by setting draggable: true:

Those poses still cascade down, too. So by setting dragging and dragEnd poses to our characters, we can make our characters animate while dragging words: