Splittext animation and translation

[soma 4 Likes (Newbie)]

Hi!
I used Weglot for a client project and I realized that the animated texts aren't translated. 
These are Splittext JS edited texts, but each character in the animation is in an individual <div> element which mean that it won't be recognized as one word in Weglot. Is there a solutions for this?

You can test here: puto.webflow.io
Thanks 🙏🏻

[GreenSock 18,286 Likes (Superhero)]

Hi @soma. I'm totally unfamiliar with Weglot. We're happy to answer any GSAP-specific questions here, but unfortunately we can't offer much advice related to Weglot or Webflow. 🤷‍♂️

 

I'm curious how you're using SplitText without a Club GreenSock membership. That's a members-only plugin. 

[soma 4 Likes (Newbie)]

12 hours ago, GreenSock said:

Hi @soma. I'm totally unfamiliar with Weglot. We're happy to answer any GSAP-specific questions here, but unfortunately we can't offer much advice related to Weglot or Webflow. 🤷‍♂️

 

I'm curious how you're using SplitText without a Club GreenSock membership. That's a members-only plugin. 

Hi, we have a company account (club member), and I have a personal (free).

[mvaneijgen 1,568 Likes (Superhero)]

@soma also never used Weglot, but are there maybe callback events you get from them on which you can hook the SplitText logic? Eg: 

 

// This is pseudo code
weglot({
  hasDoneTranslating: () => {
    // Weglot has done it's thing now animate my text
    const split = new SplitText(yourElement);
  }
})

 

[soma 4 Likes (Newbie)]

19 hours ago, mvaneijgen said:

@soma also never used Weglot, but are there maybe callback events you get from them on which you can hook the SplitText logic? Eg: 

 

// This is pseudo code
weglot({
  hasDoneTranslating: () => {
    // Weglot has done it's thing now animate my text
    const split = new SplitText(yourElement);
  }
})

 

Hi! Thanks for your answer!
There are some. I used the language changed and the init ones. But I had to use timeout to give some time for the translation, but I got this warning

[Violation] 'setTimeout' handler took XXms
[Violation] Forced reflow while executing JavaScript took XXms

And in Chrome the translation works bad. 

[mvaneijgen 1,568 Likes (Superhero)]

59 minutes ago, soma said:

I used the language changed and the init ones

Sounds like the `Language changed` hook is what you want. As soon as Weglot has changed the the content and fires an event you could split your text. 

 

Otherwise I don't know what to tell you, contact Weglot they should have documentation on how to handle certain things. As I read your post there is no issue with GSAP, because the animations are working fine.

[soma 4 Likes (Newbie)]

Yeah I use it now, but sometimes works sometimes not...
Is it possible to set a delay to the text splitting? 

[mvaneijgen 1,568 Likes (Superhero)]

Of course, but I would really check the docs on the other tool. Because you could use a `setTimeout()`, but maybe something hangs and it takes a second more and then you'll still have the same issue. There is also a function GSAP provides called `gsap.delayedCall()`, see https://greensock.com/docs/v3/GSAP/gsap.delayedCall()

 

But again, if the tool is not done translating, you'll face the same issue. If there is a slow connection or the browser hangs for any other reason.

 

[soma 4 Likes (Newbie)]

Yes, unfortunately the Weglot dosen't give too much possibility
What about this? https://greensock.com/docs/v2/Utilities/SplitText/revert()

Can it help? 

[mvaneijgen 1,568 Likes (Superhero)]

Yeah sure that reset SplitText, but you'll still need something that lets you know when the translations are done. Otherwise how will you know to split the text again?

[Harold AO 6 Likes (Newbie)]

On 6/28/2022 at 3:26 PM, soma said:

Hi!
I used Weglot for a client project and I realized that the animated texts aren't translated. 
These are Splittext JS edited texts, but each character in the animation is in an individual <div> element which mean that it won't be recognized as one word in Weglot. Is there a solutions for this?

You can test here: puto.webflow.io
Thanks 🙏🏻

Same here... with WeGlot 😵‍💫👀

[GreenSock 18,286 Likes (Superhero)]

7 hours ago, Harold AO said:

Same here... with WeGlot 😵‍💫👀

Howdy, @Harold AO 

 

Did you have a GSAP-specific question we could help with? 

[iDad5 213 Likes (Specialist)]

Out of curiosity I took a look at WeGlot, and found the API documentation - which is thin, to say the least - I'm just guessing here, but to me it sounds that the 

Weglot.on("languageChanged", callbackFunction) 

 event likely is fired when the language is changed from e.g. EN to ES through whichever mechanism. The actual replacement of one language string to another logically can only happen afterwards. That would explain the described behavior. 

As I'm guessing that the translated string is loaded asynchronously you would have to make sure to start your text-splitting only after it has arrived. I don't know obviously how they do it, and as there seem to be no documented API way to hook into, even if you could hitch onto - say a promise it might stop working the moment they change their internal workings.

So if my life depended on it, I would probably store the content of the element that is targeted by the splitText at document.ready or pageload which ever is the first one to give a useful result. Then, after the 'languageChanged' is fired I would check for changes  in said element. (Either MutaionObserver or plain old setIntervall come to mind.) Once that change is detected, let loose splitText...

Sounds complicated and might be, but hey it's a challenge.  

[Cassie 5,148 Likes (Superhero)]

Really helpful thanks @iDad5