Jump to content
Search Community

Animation to start from Last Character instead of First

aryan3650 test
Moderator Tag

Recommended Posts

Hi, 
I'm new here & need some help. I have attached my Codepen here. It's the Part of a bigger Menu.

My Text is coming from Left to the Right, So is the is the all of effects & animations. Is there a way to Start the Opacity/Letter-spacing from Right (end of the sentence) to the Left side?

So only Text will be Ease-in from Left to Right but all of the animation (Opacity/Letter-spacing) will go from Right to Left ?

Sorry, if my question is confusing.

Thanks.

See the Pen zYrNbaR by aryan3650 (@aryan3650) on CodePen

Link to comment
Share on other sites

54 minutes ago, mikel said:

See the Pen

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

by mikeK (@mikeK) on CodePen

Hi @mikel 
Thanks for your quick response. This solution is all i needed. 
Another little query, I see we can control 'char' speed in this function. My question is there any guide to look at how to control Timeline speed in this function.
Sorry i'm a little confuse b/w different gsap versions.
Best regards.

Link to comment
Share on other sites

Hi @mikel
I have another question for same example with additional stuff.
I'm having an additional (before) pseudo element in my list and as you can see it's not having Gsap animation because it's the pseudo element of our .split class. I wonder if there's any way to control these elements to have the exact animation as we are having for List Chars ?
Here is 

See the Pen qBbrNbp by aryan3650 (@aryan3650) on CodePen



Edit: Sorry i didn't know if i had to open a new topic for this. Please let me know if i need to, thanks.

Link to comment
Share on other sites

2 hours ago, aryan3650 said:

Using a <span> tag could be a possibility yes but unfortunately i'm working with Wordpress & there are certain limitation in this aspect.

You should be able to add tags since you have access to the elements via JS. Alternatively you could animate CSS variables and use those in your pseudo-elements but browser support for CSS variables isn't perfect.

Link to comment
Share on other sites

4 hours ago, ZachSaucier said:

Alternatively you could animate CSS variables and use those in your pseudo-elements but browser support for CSS variables isn't perfect.

Hi @ZachSaucier
CSS animation is an option, though i was using CSS animation to Ease-in my Text before i considered Gsap.
The thing is now i'm using Content property on my Pseudo Elements to have numeric list in of specific order

content: counter(li, decimal-leading-zero)

which i can easily change in future by simply changing it's value.
Suppose if i Ease-in Pseudo Element, there is only a possibility to ease them in 'Words' not 'Chars' & i wan't to to ease-in 'Chars'.
So, i guess CSS isn't the solution here.

Link to comment
Share on other sites

3 hours ago, mikel said:

I am not a friend or connoisseur of WORDPRESS.

Okay Let's just forget the Wordpress for a moment.
So,Basically Gsap is ignoring pseudo elements (which is obviously HTML elements) altogether ?
And i think we can't deny the importance of any basic HTML element.
What do you think @mikel ?

Link to comment
Share on other sites

38 minutes ago, ZachSaucier said:

JS can't directly affect psuedo-elements

Agree !
It's totally cool that you'r not using any CSS in Gsap but you can make it compatible & provide docs for the ones who're willing to use it pseudo-elements.
Reference
 Anyways, i have found a way to my solution.
Keep doing good work 🧩

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.
×
×
  • Create New...