Jump to content
Search Community

ReactJS (webpack) / GSAP / Plugins

lio test
Moderator Tag

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

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.
×
×
  • Create New...