Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
aryan3650

Animation to start from Last Character instead of First

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

Hey @aryan3650,

 

Welcome to the GreenSock Forum.

 

This can be an option: take a 'negative stagger amount' for a 'reversed split array'.
Sorry - I couldn't find any information in the DOCs about the 'negative amount'.

Basically: Please use the current GSAP version.

 

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

 

Happy tweening ...

Mikel

 

  • Like 3
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

Hey,

 

Instead the advanced version - using amount or each - you can use a simple stagger and define a duration (more here)

 

See the Pen wvMJMme?editors=0010 by mikeK (@mikeK) on CodePen

 

Don't be confused - just happy staggering ...

Mikel

 

  • Like 2
  • Thanks 1
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

Hey @aryan3650,

 

You could use a span object for numbering.

  • Nested elements - The element you are splitting can contain nested elements such as <span>, <strong>, <a>, etc. Works for words and chars, not lines (see this for a workaround for lines).

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

 

Happy tweening ...

Mikel

 

  • Like 1
Link to comment
Share on other sites

Hi @mikel
Using a <span> tag could be a possibility yes but unfortunately i'm working with Wordpress & there are certain limitation in this aspect.
On the other hand i can easily handle pseudo element through CSS.

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

Hey @aryan3650,

 

I am not a friend or connoisseur of WORDPRESS.
How about <strong>

 

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

 

It could be a strong solution ...

Mikel

  • Haha 1
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

24 minutes ago, aryan3650 said:

Basically Gsap is ignoring pseudo elements (which is obviously HTML elements) altogether ?

JS can't directly affect psuedo-elements. It's not a matter of GSAP or not.

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