Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
lio

ReactJS (webpack) / GSAP / Plugins

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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:

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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 !!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×