WIZARD777 Posted January 30, 2021 Share Posted January 30, 2021 Hi I have a question. Can I with splitext? Is there an example in the forum or in codepen? Thanks Link to comment Share on other sites More sharing options...
mikel Posted January 30, 2021 Share Posted January 30, 2021 Hey @WIZARD777, Welcome to the GreenSock Forum. It could be solved that way (wordsClass:"word++") See the Pen JjbojbP?editors=1010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 1 Link to comment Share on other sites More sharing options...
WIZARD777 Posted January 30, 2021 Author Share Posted January 30, 2021 Hi Mikel. How are you. Thank you very much for your prompt reply. Excuse my writing of English, because I am a Spanish speaker Link to comment Share on other sites More sharing options...
mikel Posted January 30, 2021 Share Posted January 30, 2021 Hey @WIZARD777, Please show your case, your CodePen. Link to comment Share on other sites More sharing options...
WIZARD777 Posted January 30, 2021 Author Share Posted January 30, 2021 I put the following in your codepen: .to ('. word1, .word2', {fontWeight: 600}, '+ = 0.5') .to ('. word3, .word4', {fontWeight: 600, color: "green"}) .to ('. word5, .word6', {fontWeight: 600}, '+ = 0.5') Link to comment Share on other sites More sharing options...
mikel Posted January 30, 2021 Share Posted January 30, 2021 The two words could each 'form a line' See the Pen vYyEYbZ?editors=1010 by mikeK (@mikeK) on CodePen Better ... ? 2 Link to comment Share on other sites More sharing options...
WIZARD777 Posted January 31, 2021 Author Share Posted January 31, 2021 Hello Mikel, thanks for answering. I refer you to the example in codepen: See the Pen PobwKQx by WIZARD7771 (@WIZARD7771) on CodePen where there is an ANIMATED WORD. What I need is that when clicking the button, groups of "2 words" are animated instead of a single word. I think it's like it could be that "split text" joins 2 words in a single "div". Anyway, I am not an expert in gsap, I am just learning, but I need to know if it is possible to animate groups of 2 words using "split text", within a long text. Link to comment Share on other sites More sharing options...
PointC Posted January 31, 2021 Share Posted January 31, 2021 There would be a few ways to make it happen. An easy choice would be to loop through your words array and animate two at a time like this. See the Pen jOVEade by PointC (@PointC) on CodePen Hopefully that helps. Happy tweening. 5 1 Link to comment Share on other sites More sharing options...
WIZARD777 Posted February 1, 2021 Author Share Posted February 1, 2021 Hi Craig. Thank you very much! Perfect. 😄 Link to comment Share on other sites More sharing options...
mikel Posted February 1, 2021 Share Posted February 1, 2021 Hey @WIZARD777, You need another target ... for (let i = 0; i < mySplitText.words.length; i += 3) { target1 = mySplitText.words[i]; target2 = mySplitText.words[i + 1] ; target3 = mySplitText.words[i + 2] ; gsap.from([target1, target2, target3], { duration: 0.075, scale: 0, delay: i * 0.15 }); } If you invest a little in the prep of the html element, you can group the text with different numbers of words / characters - as you wish. That then saves a few lines of JS. See the Pen qBqELMX?editors=1010 by mikeK (@mikeK) on CodePen Happy splitting ... Mikel 1 1 Link to comment Share on other sites More sharing options...
WIZARD777 Posted February 8, 2021 Author Share Posted February 8, 2021 Hi Mikel. How are you, It worked perfectly. It was what I needed. Gsap is the best. You are very kind. Thank you very much. Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 8, 2021 Share Posted February 8, 2021 14 minutes ago, WIZARD777 said: How can I make it so that when the 3 words are divided they are highlighted in a specific color? The easiest way would probably be to animate the targeted 3 words using a tween. 1 Link to comment Share on other sites More sharing options...
WIZARD777 Posted February 8, 2021 Author Share Posted February 8, 2021 I'm interested in purchasing the GSAP membership, but first I'm testing the codepen forums and samples. I already understood and tested Craig and Mikel's directions. I am just learning. Link to comment Share on other sites More sharing options...
WIZARD777 Posted February 8, 2021 Author Share Posted February 8, 2021 My question is: in a specific color? For example highlight with green, as in the attached graphic. Link to comment Share on other sites More sharing options...
mikel Posted February 8, 2021 Share Posted February 8, 2021 Hey @WIZARD777, Look at the code. It's really not that complicated. See the Pen rNWLwRz?editors=1010 by mikeK (@mikeK) on CodePen Happy splitting ... Mikel 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 8, 2021 Share Posted February 8, 2021 @WIZARD777 As the forums guidelines cover, we simply cannot create a demo for every request that people put in these forums. Usually we require a minimal demo made using CodePen along with a specific question of what the person is seeking help with. But since you're relatively new here I'm happy to help out with extra aid this time Some notes: That pen is using some of the old syntax. We highly recommend the GSAP 3 syntax. Upgrading is easy! There's not much reason to use jQuery if that's all that you're trying to do. I would use the vanilla JS equivalents. You can do what I recommended to do by changing out the tween like so: See the Pen yLVJoLb?editors=0010 by GreenSock (@GreenSock) on CodePen I highly recommend that you start with the Getting Started and most common GSAP mistakes articles as doing so will save you a bunch of time. Past that, the docs are a fantastic resource for learning. 3 Link to comment Share on other sites More sharing options...
PointC Posted February 8, 2021 Share Posted February 8, 2021 So you don't want the words to scale up? Just change color two at a time? Like this? See the Pen 356aca045ac39226930582d2560baa6f by PointC (@PointC) on CodePen 3 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