Split Text (Lines) - Reverse once Animation is completed and Reverse and Play Again when Window is Resized

[Alex J. 8 Likes (Newbie)]

Hello there, You awesome people on the Internet. I am back again with yet another query. 

 

What are we doing: 

- We are using a page builder on a CMS which allows us to add the class to the container and not the h2, p, span etc. elements. (I know that sucks but let's just say we don't have control over it).

- We are giving the container a class and then using the same to find p, headings etc tags which we want to split and animate. 

- We are also wrapping the splitted lines in a div container using jQuery (it will help us with animation)

 

The problem:

- Since we are using forEach, is there any way to reverse the splitlines after every line animation? If not, maybe we can count all the lines somhow and have an onComplete function which will check the same and if all lines are animated, will simply reverse the splitlines?

- Upon Resize of Window: On Big paragraphs, the window resize tries to adjust the splitted lines but fails. (Since they are wrapped inside the DIV now). Any way using which we could reverse the splitlines, execute it again and then run the animation again? 

 

What I've tried:

I came across this amazing post here in which @GreenSock shared a codepen demo, I tried to use the same but found:

- The lines count does not work since the split-me is now on multiple divs which might have multiple ps, h1s inside of it. So the splittext never reverses even after all lines are animated. 

- With resize, not sure why, but the Reverse was never actually executing, maybe because we wrapped a DIV around each line? 
 

 

 

Please check the Codepen attached to view what I mean. I would love to use some help ) 

Thank You 

See the Pen poreWeg by alexjain (@alexjain) on CodePen

[OSUblake 18,492 Likes (Superhero)]

Hi Alex,

 

You should do what the pen in that thread you linked to is doing, and create a setup function for each one. And I'm not sure why you are wrapping the SplitText with another div.

 

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

 

[Alex J. 8 Likes (Newbie)]

4 minutes ago, OSUblake said:

Hi Alex,

 

You should do what the pen in that thread you linked to is doing, and create a setup function for each one. And I'm not sure why you are wrapping the SplitText with another div.

 

 

 

 

 

Thank you for your valuable time and reply @OSUblake, the reason why we are wrapping the lines in another div is to help with animation. 

 

We are making overflow: hidden on that div. If you see in the CSS, we have the following code which gives the lines, a 'revealing effect'. 

 

.split-me .line-wrapper {
  overflow: hidden;
}

Thank You )

[Alex J. 8 Likes (Newbie)]

Okay, wow. I think I managed to do it.

 

Here's what I did:

- Instead of Wrapping the lines in DIVs, I used the splittext twice and give the outer split the class of line-wrapper. Then simply use the code by @OSUblake and @GreenSock which worked flawlessly. 

 

Here's the codepen:

See the Pen VwMMgpQ by alexjain (@alexjain) on CodePen

 

 

But but, I have another issue now. For some reason, on production, I am getting the following error. Anyone who have any idea? 

 

 

the code snippet it is referring to is (I have added a comment in Codepen to both these lines):

Thank You ) 

[OSUblake 18,492 Likes (Superhero)]

What version of SplitText and GSAP are you running? What I did here is a fairly new feature, so I would try to update everything to the lastest, v3.9.0.

 

let text = gsap.utils.toArray("h1, h2, h3, h4, h5, h6, p, li", el);

 

[Alex J. 8 Likes (Newbie)]

10 minutes ago, OSUblake said:

What version of SplitText and GSAP are you running? What I did here is a fairly new feature, so I would try to update everything to the lastest, v3.9.0.

 

let text = gsap.utils.toArray("h1, h2, h3, h4, h5, h6, p, li", el);

 

Thanks for your quick reply @OSUblake:

- SplitText V3.6.0

- GSAP V3.6.0

 

Edit: Updating GSAP to V3.9.0 worked like a charm! Thank you so much osublake