Jump to content
GreenSock

soma

Splittext animation and translation

Recommended Posts

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 🙏🏻

Link to comment
Share on other sites

  • soma changed the title to Splittext animation and translation

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. :)

Link to comment
Share on other sites

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

  • Thanks 1
Link to comment
Share on other sites

@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);
  }
})

 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

  • 4 weeks later...
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 😵💫👀

Link to comment
Share on other sites

7 hours ago, Harold AO said:

Same here... with WeGlot 😵💫👀

Howdy, @Harold AO 

 

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

Link to comment
Share on other sites

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. :-) 

  • Like 3
Link to comment
Share on other sites

Really helpful thanks @iDad5

  • Like 1
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.
×