Share Posted October 29, 2018 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! 1 Link to post Share on other sites
Share Posted October 29, 2018 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. 6 Link to post Share on other sites
Author Share Posted October 29, 2018 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
Author Share Posted October 29, 2018 With that solution can each line be animated as a full line of text now? Link to post Share on other sites
Share Posted October 29, 2018 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. 6 1 Link to post Share on other sites
Author Share Posted October 29, 2018 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! 1 Link to post Share on other sites
Share Posted October 29, 2018 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. 1 3 Link to post Share on other sites
Author Share Posted October 29, 2018 Yes, I turned it up to 11 and found myself in the upside down with Spinal Tap! I’ll play it safe. Thx dudes! 4 Link to post Share on other sites
Share Posted December 21, 2018 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
Share Posted December 21, 2018 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); 2 Link to post Share on other sites
