print dynamic value using TextPlugin on react

[pietdasilva]

import React, { useEffect, useRef } from "react";
import Language from "./Language";
import { gsap } from "gsap";
import { useTranslation } from "react-i18next";
gsap.registerPlugin(TextPlugin);


function Main() {
const helloRef = useRef();
const { t } = useTranslation();

useEffect(() => {
    const text = helloRef.current;
    const title = <h1>{t("main_title")}</h1>

    gsap.to(text, {
      text: {
        value: title,
        delimiter: "",
      },
      ease: "power1.in",
      duration: 5,
    });
  }, []);

  
  return (
    <>
        <div>
          <h1 ref={helloRef}>{}</h1>
        </div>
    </>
  );
}

 

hi friends, i stored some object linked to a json file on this "./Language.js" and would like to make it work with the value on text plugin (can't pass it as a string since it will change the language i18next). if i printed the {t()} function right on my return it works, but with the useEffect and gsap i can't get to grasp it. some hint?

[Rodrigo]

Hi,

 

The problem is that you are creating the animation only in the first render since you're passing an empty dependencies array:

useEffect(() => {
  // Code here runs only on first render
}, []); //<-Empty dependencies array

You have to check the language change used by the translation package in order to run the animation again. Now I used i18Next before but never in such a case so I couldn't tell you how to proceed on this case. Most likely the i18n object changes and you can pass that into the useEffect hook, you'll have to check the i18n API in order to find out what exactly you should look for:

const { t, i18n } = useTranslation();

useEffect(() => {
  // Here check i18n.language or something like that
}, [i18n]);

If you keep having issues, please provide a minimal demo so we can take a look.

 

Finally we strongly recommend using GSAP Context in React apps in order to simplify selecting and cleaning up, among other things:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Happy Tweening!