Share Posted January 30 Hi I have a question. Can I with splitext? Is there an example in the forum or in codepen? Thanks Link to post Share on other sites
Share Posted January 30 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 post Share on other sites
Author Share Posted January 30 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 post Share on other sites
Share Posted January 30 Hey @WIZARD777, Please show your case, your CodePen. Link to post Share on other sites
Author Share Posted January 30 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 post Share on other sites
Share Posted January 30 The two words could each 'form a line' See the Pen vYyEYbZ?editors=1010 by mikeK (@mikeK) on CodePen Better ... ? 2 Link to post Share on other sites
Author Share Posted January 31 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 post Share on other sites
Share Posted January 31 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 post Share on other sites
Author Share Posted February 1 Hi Craig. Thank you very much! Perfect. 😄 Link to post Share on other sites
Share Posted February 1 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 post Share on other sites
Author Share Posted February 8 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 post Share on other sites
Share Posted February 8 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 post Share on other sites
Author Share Posted February 8 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 post Share on other sites
Author Share Posted February 8 My question is: in a specific color? For example highlight with green, as in the attached graphic. Link to post Share on other sites
Share Posted February 8 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 post Share on other sites
Share Posted February 8 @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 post Share on other sites
Share Posted February 8 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 post Share on other sites
