Need help with splitText

[Vasyl Shvets]

For example:

<div data-split-this-container>

    <div>title first</div>

    <div class="text">text descr</div>

    <div>title second</div>

</div>

I have a container, and i need to split all words inside this container. Only element with class "text" i don't need to split, but also animate in turn. 

So in the end i need to have kind of this animation:

title > title > text descr > title > second.

 

Can anybody help?)

See the Pen QWOpNpo by vasyl-shvets (@vasyl-shvets) on CodePen

[OSUblake]

Hi Vasyl,

 

I would probably sort out what needs to be split kind of like this.

 

See the Pen dyZvXRQ by GreenSock (@GreenSock) on CodePen

 

[Vasyl Shvets]

Thank you! But i have a problem with nesting, it does not work

 

[OSUblake]

Can you add a class to the divs that need to be split? Otherwise you're going to have to come up with some other traversal method, like with a tree walker, but it's going to get complicated real quick trying to sort out what should be split.

 

See the Pen ExbWvMY by GreenSock (@GreenSock) on CodePen

 

[Vasyl Shvets]

Yes, i can. But element with class "text" need to be animated in turn. Can i do that?

 

[OSUblake]

Isn't that what the demo I posted above doing?