GSAP Plugins

There are some Core Plugins that are already included in GSAP: https://greensock.com/docs/v3/GSAP/CorePlugins

And there are some free Plugins that you can use to extend the functionality. Here is the list: https://greensock.com/docs/v3/Plugins.

To use them with react-gsap you first have to register them.

Register the TextPlugin for example:

import { gsap } from 'gsap';
import { TextPlugin } from 'gsap/TextPlugin';
# if your build step doesn't transpile inside node_modules you can try this import:
import { TextPlugin } from 'gsap/dist/TextPlugin';
gsap.registerPlugin(TextPlugin);

And use it:

This is a text.

<Controls playState={PlayState.stop}>
  <Tween to={{ text: 'This is the new text.' }} duration={2}>
    <span>This is a text.</span>
  </Tween>
</Controls>

<Controls playState={PlayState.stop}>
  <Tween to={{ text: 'This is the new text.' }} duration={2}>
    <span>This is a text.</span>
  </Tween>
</Controls>

GSAP Plugins

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Register the TextPlugin for example:

And use it:

Register the TextPlugin for example: