Jump to content
GreenSock

pietdasilva

print dynamic value using TextPlugin on react

Recommended Posts

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?

Link to comment
Share on other sites

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!

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.
×