Tween

The Tween component uses the gsap.to(), gsap.from() and gsap.fromTo() functions internally.

The children need to be "refable" components. So they can be HTML elements or forwardRef components like styled-components components.

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

Use "to" prop

<Controls playState={PlayState.stop}>
  <Tween to={{ x: '200px', rotation: 180 }} duration={2} ease="back.out(1.7)">
    <div style={{ width: '100px', height: '100px', background: '#ccc' }} />
  </Tween>
</Controls>

<Controls playState={PlayState.stop}>
  <Tween to={{ x: '200px', rotation: 180 }} duration={2} ease="back.out(1.7)">
    <div style={{ width: '100px', height: '100px', background: '#ccc' }} />
  </Tween>
</Controls>

Use "from" prop

<Controls playState={PlayState.stop}>
  <Tween from={{ x: '200px', rotation: 180 }} duration={2}>
    <div style={{ width: '100px', height: '100px', background: '#ccc' }} />
  </Tween>
</Controls>

<Controls playState={PlayState.stop}>
  <Tween from={{ x: '200px', rotation: 180 }} duration={2}>
    <div style={{ width: '100px', height: '100px', background: '#ccc' }} />
  </Tween>
</Controls>

Use "from" and "to" prop

Internally the gsap.fromTo() function will be called.

<Controls playState={PlayState.stop}>
  <Tween
    from={{ x: '100px', rotation: 45 }}
    to={{ x: '200px', rotation: 135 }}
    duration={2}
  >
    <div style={{ width: '100px', height: '100px', background: '#ccc' }} />
  </Tween>
</Controls>

<Controls playState={PlayState.stop}>
  <Tween
    from={{ x: '100px', rotation: 45 }}
    to={{ x: '200px', rotation: 135 }}
    duration={2}
  >
    <div style={{ width: '100px', height: '100px', background: '#ccc' }} />
  </Tween>
</Controls>

Use stagger prop

If you have multiple children you can make use of the stagger prop.

More info: https://greensock.com/docs/v3/Staggers

<Controls playState={PlayState.stop}>
  <Tween to={{ x: '200px' }} stagger={0.2} ease="elastic.out(0.2, 0.1)">
    <div style={{ width: '20px', height: '20px', background: '#ccc' }} />
    <div style={{ width: '20px', height: '20px', background: '#ccc' }} />
    <div style={{ width: '20px', height: '20px', background: '#ccc' }} />
    <div style={{ width: '20px', height: '20px', background: '#ccc' }} />
    <div style={{ width: '20px', height: '20px', background: '#ccc' }} />
  </Tween>
</Controls>

<Controls playState={PlayState.stop}>
  <Tween to={{ x: '200px' }} stagger={0.2} ease="elastic.out(0.2, 0.1)">
    <div style={{ width: '20px', height: '20px', background: '#ccc' }} />
    <div style={{ width: '20px', height: '20px', background: '#ccc' }} />
    <div style={{ width: '20px', height: '20px', background: '#ccc' }} />
    <div style={{ width: '20px', height: '20px', background: '#ccc' }} />
    <div style={{ width: '20px', height: '20px', background: '#ccc' }} />
  </Tween>
</Controls>

Advanced stagger

<Controls playState={PlayState.stop}>
  <div
    style={{
      width: '200px',
      height: '200px',
      display: 'flex',
      flexWrap: 'wrap',
    }}
  >
    <Tween
      from={{ scale: 0.1 }}
      stagger={{ from: 'center', amount: 1, grid: [3, 3] }}
      duration={1}
      ease="elastic.out(2, 0.5)"
    >
      <div
        style={{ width: '33.33%', height: '33.33%', background: '#ccc' }}
      />
      <div
        style={{ width: '33.33%', height: '33.33%', background: '#ccc' }}
      />
      <div
        style={{ width: '33.33%', height: '33.33%', background: '#ccc' }}
      />
      <div
        style={{ width: '33.33%', height: '33.33%', background: '#ccc' }}
      />
      <div
        style={{ width: '33.33%', height: '33.33%', background: '#ccc' }}
      />
      <div
        style={{ width: '33.33%', height: '33.33%', background: '#ccc' }}
      />
      <div
        style={{ width: '33.33%', height: '33.33%', background: '#ccc' }}
      />
      <div
        style={{ width: '33.33%', height: '33.33%', background: '#ccc' }}
      />
      <div
        style={{ width: '33.33%', height: '33.33%', background: '#ccc' }}
      />
    </Tween>
  </div>
</Controls>

<Controls playState={PlayState.stop}>
  <div
    style={{
      width: '200px',
      height: '200px',
      display: 'flex',
      flexWrap: 'wrap',
    }}
  >
    <Tween
      from={{ scale: 0.1 }}
      stagger={{ from: 'center', amount: 1, grid: [3, 3] }}
      duration={1}
      ease="elastic.out(2, 0.5)"
    >
      <div
        style={{ width: '33.33%', height: '33.33%', background: '#ccc' }}
      />
      <div
        style={{ width: '33.33%', height: '33.33%', background: '#ccc' }}
      />
      <div
        style={{ width: '33.33%', height: '33.33%', background: '#ccc' }}
      />
      <div
        style={{ width: '33.33%', height: '33.33%', background: '#ccc' }}
      />
      <div
        style={{ width: '33.33%', height: '33.33%', background: '#ccc' }}
      />
      <div
        style={{ width: '33.33%', height: '33.33%', background: '#ccc' }}
      />
      <div
        style={{ width: '33.33%', height: '33.33%', background: '#ccc' }}
      />
      <div
        style={{ width: '33.33%', height: '33.33%', background: '#ccc' }}
      />
      <div
        style={{ width: '33.33%', height: '33.33%', background: '#ccc' }}
      />
    </Tween>
  </div>
</Controls>

Props

The question mark means it's an optional prop.

For a documentation of all possible props or from and to values check out the documentations: vars, gsap.to(), gsap.from() and gsap.fromTo()

Name	Type	Description
children?	React.ReactNode	Need to be "refable" components. So they can be HTML elements or forwardRef components like styled-components components
wrapper?	any	This component gets wrapped around the Tween component
target?	number \| string	The target index or key of the Timeline targets. Used if Tween is childless and child of a Timeline
position?	string \| number	If this Tween is a child from a Timeline it's added at this position
from?	any	The vars object for the gsap.from() or gsap.fromTo() function
to?	any	The vars object for the gsap.to() or gsap.fromTo() function
stagger?	number \| Stagger \| (index: number, target: any, list: any) => number	If multiple children are added, you can stagger the start times for each
duration?	number	The duration of the animation (in seconds) (Can be changed on-the-fly)
progress?	number	0 - 1 (Can be changed on-the-fly)
totalProgress?	number	0 - 1 (Can be changed on-the-fly)
playState?	PlayState	Use it to control the playing state (Can be changed on-the-fly)
disabled?	boolean	on-the-fly changes and are no more possible
onlyInvalidateTo?	boolean
[prop: string]	any	All other props are added to the vars object for the Tween functions

Type Stagger