Share Posted June 20, 2020 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 More sharing options...
Share Posted June 20, 2020 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 3 Link to comment Share on other sites More sharing options...
Author Share Posted June 20, 2020 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 More sharing options...
Share Posted June 20, 2020 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 2 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 21, 2020 4 hours ago, mikel said: more here Hey @mikel Got my solution by setting each: in stagger. Thanks for saving me See the Pen qBbrNbp by aryan3650 (@aryan3650) on CodePen 2 Link to comment Share on other sites More sharing options...
Author Share Posted June 22, 2020 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 More sharing options...
Share Posted June 22, 2020 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 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 22, 2020 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 More sharing options...
Share Posted June 22, 2020 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 More sharing options...
Author Share Posted June 22, 2020 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 More sharing options...
Share Posted June 22, 2020 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 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 22, 2020 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 More sharing options...
Share Posted June 22, 2020 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. 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 22, 2020 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 More sharing options...
Share Posted June 23, 2020 12 hours ago, aryan3650 said: you can make it compatible & provide docs for the ones who're willing to use it pseudo-elements. We do: https://greensock.com/docs/v3/Plugins/CSSRulePlugin Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now