Function SplitTextDemo

src/demo/TextAnimations/SplitTextDemo.jsx:32–198

()

};

const SplitTextDemo = () => {
  const { props, updateProp, resetProps, hasChanges } = useComponentProps(DEFAULT_PROPS);
  const { delay, duration, ease, splitType, showCallback } = props;

  const [key, forceRerender] = useForceRerender();

  const propData = useMemo(
    () => [
      {
        name: 'tag',
        type: 'string',
        default: '"p"',
        description: 'HTML tag to render: "h1", "h2", "h3", "h4", "h5", "h6", "p",'
      },
      { name: 'text', type: 'string', default: '""', description: 'The text content to animate.' },
      {
        name: 'className',
        type: 'string',
        default: '""',
        description: 'Additional class names to style the component.'
      },
      {
        name: 'delay',
        type: 'number',
        default: '50',
        description: 'Delay between animations for each letter (in ms).'
      },
      {
        name: 'duration',
        type: 'number',
        default: '1.25',
        description: 'Duration of each letter animation (in seconds).'
      },
      { name: 'ease', type: 'string', default: '"power3.out"', description: 'GSAP easing function for the animation.' },
      {
        name: 'splitType',
        type: 'string',
        default: '"chars"',
        description: 'Split type: "chars", "words", "lines", or "words, chars".'
      },
      {
        name: 'from',
        type: 'object',
        default: '{ opacity: 0, y: 40 }',
        description: 'Initial GSAP properties for each letter/word.'
      },
      {
        name: 'to',
        type: 'object',
        default: '{ opacity: 1, y: 0 }',
        description: 'Target GSAP properties for each letter/word.'
      },
      {
        name: 'threshold',
        type: 'number',
        default: '0.1',
        description: 'Intersection threshold to trigger the animation (0-1).'
      },