Jump to content
GreenSock

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

Can with splitext?

Recommended Posts

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

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

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

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

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.

:)

 

  • Like 5
  • Thanks 1
Link to post
Share on other sites

Hi Craig. Thank you very much!
Perfect.  😄

 

Link to post
Share on other sites

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

 

  • Like 1
  • Thanks 1
Link to post
Share on other sites
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
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. 

  • Like 1
Link to post
Share on other sites
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
My question is:
in a specific color?
 
For example highlight with green, as in the attached graphic.
Link to post
Share on other sites

@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:

  1. That pen is using some of the old syntax. We highly recommend the GSAP 3 syntax. Upgrading is easy!
  2. 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.
  3. 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.

  • Like 3
Link to post
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.

×