rtl problem while using text animation with split text plugin

[Mahabub Hossain]

Hello experts,

I'm a very beginner with gsap. I'm facing a problem while I'm using animation with split text plugin. If I apply css to my body tag direction:rtl;  the animated text are not behaving , as the normal text do.

I created a demo. please take a look, when I use direction rtl to my body tag, animated text are not behaving the right way, look at the h2 tag. Also if I apply text-transform: capitalize; property to my animated text, the whole line getting uppercase. How can I solve this.

I'll be very thankful if anyone help me about this.

Thanks in advance

See the Pen MWzxdvo by Mahabub-Hossain-the-selector (@Mahabub-Hossain-the-selector) on CodePen

[Rodrigo]

Hi,

 

Check this thread and the one linked on it

 

 

 

Finally I saw that you created the exact same thread again. Please don't duplicate threads, we do our best to answer back in less than 24 hours, but on weekends we expect a bit more patience on the subject.

 

Hopefully this helps.

Happy Tweening!

[Mahabub Hossain]

Many many thanks for replying me and sorry for the occurrence, actually I noticed, but can't configure out the solution, can you please take a look at my problems, if you don't mind.

Thank you

 

[Mahabub Hossain]

Hi there, I'll be very thankful if you please help me to solve this. I'm facing very much problem about this.

Thank you

 

[Rodrigo]

Hi,

 

A few things. I noticed that in your codepen example you didn't applied dir="rtl" in the attributes. Adding direction in your CSS might not be enough. I worked in some projects with a company in Saudi Arabia for a few years and, while we never used SplitText we always used the attribute in the body tag and then cascading it to the different elements when needed.

 

Also, while we understand that there are deadlines and requirements, please try to understand that it's Sunday and we have other activities and plans, so posting many replies won't have any effect whatsoever. Please be patient and try different alternatives to solve the issue. Unfortunately I'm not in front of my computer now so I can't do a lot from my phone.

 

Happy Tweening!

[Mahabub Hossain]

Many many thanks for your reply. I added it to the css in the body tag body {
  font-family: "Signika Negative", sans-serif;
  font-weight: 300;
  margin: 0;
  padding: 0 20px;
  direction: rtl;
}
I'll be glad if you solve this problem whenever you get time. Have a great day!

Thanks again

[GreenSock]

Is there a reason you're not just using text-align: right? Why are you doing direction: rtl? 

 

direction: rtl makes some fundamental changes in the way things flow which interferes with SplitText. Are you just trying to get things to align right? 

[Mahabub Hossain]

Many many thanks for replying me, for making rtl website I've to must use direction:rtl; rather than text align. Hoping you'll help me to fix this problem.

Have a great day!

Thanks in advance

 

[Mahabub Hossain]

Hello experts, 

I didn't got the solution yet. Is there anyone to help me about this?

Thank you

[Rodrigo]

Hi,

 

The result you are getting in the updated version of your codepen example is the exact same result as in this codepen by @mikel

See the Pen rbwBeG by mikeK (@mikeK) on CodePen

 

This is a fork of your codepen with the direction attribute in the body tag:

See the Pen jOQRLjE by GreenSock (@GreenSock) on CodePen

 

Beyond that, as it has been explained already by Jack in this thread and another thread that was linked in a previous post of mine:

 

This is just the current status of what SplitText can do in this subject, so beyond this there is not a lot we can do.

 

Finally, please stop creating more threads about the same subject (you already have created 3), and responses have been provided in this one as well as resources with explanations with the way things work and the limitations on the subject.

 

Hopefully this helps.

Happy Tweening!