Jump to content
Search Community

Can with splitext?

WIZARD777 test
Moderator Tag

Recommended Posts

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

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 comment
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 comment
Share on other sites

  • WIZARD777 changed the title to Can with splitext?

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.
×
×
  • Create New...