Jump to content
GreenSock

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

Split Text question

Recommended Posts

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!

SplitTextHelp.jpg

  • Like 1
Link to post
Share on other sites

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.

:)

 

  • Like 6
Link to post
Share on other sites

Oh SNAP! Yeah that looks right. 

 

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

Thx PointC

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

:)

 

 

 

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

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!

  • Like 1
Link to post
Share on other sites

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. :D

 

Happy tweening.

:)

  

  • Like 1
  • Haha 3
Link to post
Share on other sites

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

 I’ll play it safe. 

 

Thx dudes!

  • Haha 4
Link to post
Share on other sites

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

Link to post
Share on other sites

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);

 

 

 

  • Like 2
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.

×