CountPlugin

The CountPlugin animates an number counting. It uses the innerText from the target elements. (children)

It can be called with the "count" property which takes an number or an object with the following properties:

Name	Type
value	number
format	() => (value) => string

import { Controls, PlayState, Tween } from 'react-gsap';

Integer

By default the count value will be parsed to an integer.

<Controls playState={PlayState.stop}>
  <div
    style={{
      width: '70px',
      height: '70px',
      background: '#ccc',
      textAlign: 'center',
    }}
  >
    <Tween
      to={{
        count: 100,
      }}
      ease="none"
      duration={5}
    >
      <div style={{ fontSize: '40px', lineHeight: '70px' }}>0</div>
    </Tween>
  </div>
</Controls>

<Controls playState={PlayState.stop}>
  <div
    style={{
      width: '70px',
      height: '70px',
      background: '#ccc',
      textAlign: 'center',
    }}
  >
    <Tween
      to={{
        count: 100,
      }}
      ease="none"
      duration={5}
    >
      <div style={{ fontSize: '40px', lineHeight: '70px' }}>0</div>
    </Tween>
  </div>
</Controls>

Custom format function

You can use your own custom format function.

10.00

<Controls playState={PlayState.stop}>
  <div
    style={{
      width: '100px',
      height: '70px',
      background: '#ccc',
      textAlign: 'center',
    }}
  >
    <Tween
      to={{
        count: {
          value: 100,
          format: () => value => value.toFixed(2),
        },
      }}
      ease="none"
      duration={5}
    >
      <div style={{ fontSize: '30px', lineHeight: '70px' }}>10.00</div>
    </Tween>
  </div>
</Controls>

<Controls playState={PlayState.stop}>
  <div
    style={{
      width: '100px',
      height: '70px',
      background: '#ccc',
      textAlign: 'center',
    }}
  >
    <Tween
      to={{
        count: {
          value: 100,
          format: () => value => value.toFixed(2),
        },
      }}
      ease="none"
      duration={5}
    >
      <div style={{ fontSize: '30px', lineHeight: '70px' }}>10.00</div>
    </Tween>
  </div>
</Controls>

Percentage Bar

0 %

<Controls playState={PlayState.stop}>
  <Timeline>
    <Tween
      to={{
        count: {
          value: 100,
          format: () => value => `${parseInt(value, 10)} %`,
        },
      }}
      ease="none"
      duration={5}
      position={0}
    >
      <div style={{ fontSize: '30px' }}>0 %</div>
    </Tween>
    <div
      style={{ width: '300px', height: '30px', border: '2px solid black' }}
    >
      <Tween
        to={{
          width: '300px',
          background: 'green',
        }}
        ease="none"
        duration={5}
        position={0}
      >
        <div style={{ width: '0px', height: '30px', background: 'red' }} />
      </Tween>
    </div>
  </Timeline>
</Controls>

<Controls playState={PlayState.stop}>
  <Timeline>
    <Tween
      to={{
        count: {
          value: 100,
          format: () => value => `${parseInt(value, 10)} %`,
        },
      }}
      ease="none"
      duration={5}
      position={0}
    >
      <div style={{ fontSize: '30px' }}>0 %</div>
    </Tween>
    <div
      style={{ width: '300px', height: '30px', border: '2px solid black' }}
    >
      <Tween
        to={{
          width: '300px',
          background: 'green',
        }}
        ease="none"
        duration={5}
        position={0}
      >
        <div style={{ width: '0px', height: '30px', background: 'red' }} />
      </Tween>
    </div>
  </Timeline>
</Controls>

CountPlugin

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Integer

Custom format function

Percentage Bar

Integer