ReactJS (webpack) / GSAP / Plugins

[lio]

Hello, I use TweenMax in React, no worries until then. Now I would like to use the TextPlugin plugin but I can't get it work with the import...

 

 

import {TweenMax} from "gsap";

const TextPlugin = require("gsap/TextPlugin");

const About = () => {
  let xpRef = useRef<HTMLHeadingElement>(null);
  let educRef = useRef<HTMLHeadingElement>(null);

  useEffect(() => {
    TweenMax.to(xpRef.current,1, {text: "This is the new text", ease: "none"});
    TweenMax.to(educRef.current,1, {text: "This is the new text", ease: "none", delay: .3});
  }, []);

 

I test that too :

 

import {TweenMax, TextPlugin } from "gsap/all";

const plugins = [TextPlugin];

const About = () => {
  let xpRef = useRef<HTMLHeadingElement>(null);
  let educRef = useRef<HTMLHeadingElement>(null);

  useEffect(() => {
    TweenMax.to(xpRef.current,1, {text: "This is the new text", ease: "none"});
    TweenMax.to(educRef.current,1, {text: "This is the new text", ease: "none", delay: .3});
  }, []);

Both of them didn't work

Many thanks in advance

[ZachSaucier]

Hey lio and welcome to the GreenSock forums!

 

We highly recommend using the GSAP Install helper in our docs until you get used to the GSAP importing format. Clicking the check box for TextPlugin will show you that the correct format is:

import { gsap } from "gsap";
import { TextPlugin } from "gsap/TextPlugin";

gsap.registerPlugin(TextPlugin);

Happy tweening.

[ZachSaucier]

By the way, TweenMax and the duration parameter are some of the old GSAP 2 ways of doing things. We highly recommend using the GSAP 3 formatting that's more simple. For more information see the GSAP 3 migration guide:

 

[lio]

47 minutes ago, ZachSaucier said:

Hey lio and welcome to the GreenSock forums!

 

We highly recommend using the GSAP Install helper in our docs until you get used to the GSAP importing format. Clicking the check box for TextPlugin will show you that the correct format is:

import { gsap } from "gsap";
import { TextPlugin } from "gsap/TextPlugin";

gsap.registerPlugin(TextPlugin);

Happy tweening.

 

Thanks a lot !!