Split Text question

[retropunk]

Hey guys, if I have an H1 tag and it has 4 lines of text, can I mask it like this with SplitText?

This animates each line but is there a way to mask the lines with SplitText? (hope, hope)

Like a trick with overflow hidden on each line?

tl.staggerFrom(mySplitText.lines, 0.25, {autoAlpha: 0, y: 10}, 0.12);

 

Thanks!

[PointC]

You could break it with lines and chars (or words) and then set the overflow to hidden. Animate the chars (or words) instead of the line.

 

See the Pen GYLbdX by PointC (@PointC) on CodePen.

Is that what you meant?

 

Happy tweening.

 

[retropunk]

Oh SNAP! Yeah that looks right. 

 

Im on my phone but I’ll confirm when I get back to my desk. 

Thx PointC

[retropunk]

With that solution can each line be animated as a full line of text now?

[PointC]

Sorry, I didn't realize you only wanted lines. I thought you were gonna animate the individual characters and/or words up from the lines. If you only want the lines, I'd probably split the text twice and set the outer div overflow to hidden. Maybe something like this.

 

See the Pen pxBMvy by PointC (@PointC) on CodePen.

Does that help?

 

Happy tweening.

 

 

 

[retropunk]

That’s it!

sorry I’m on the train without my laptop. But this looks great. 

 

I didnt realize you you could split more than once!

my head just exploded!

 

thx for this!

[PointC]

Happy to help. 

 

Be careful splitting the same element too many times. If you exceed 10 splits on the same element, you risk ripping a hole in the space time continuum and ending up in an alternate universe. 

 

Happy tweening.

  

[retropunk]

Yes, I turned it up to 11 and found myself in the upside down with Spinal Tap!

 I’ll play it safe. 

 

Thx dudes!

[TEQQED]

Hi,
How can i make this effect only once , because now the effect is running a loop , i ned it only once after visible the content
Thanks

[Carl]

Hi TEQQED

 

Please see in PointC's example this code:

 

var tl = new TimelineMax({repeat:-1, repeatDelay:0.5, yoyo:true});
tl.staggerFrom(".lineChild", 0.75, {y:50}, 0.25);

 

repeat:-1 means repeat forever. You can change it to 1 to have it repeat once. That means the text will come into view and then leave.

If you want it to just come into view just remove all the code related to repeating (repeat, repeatDelay, and yoyo).

 

var tl = new TimelineMax();
tl.staggerFrom(".lineChild", 0.75, {y:50}, 0.25);