Jump to content


Adding Line Breaks using Text Plugin

Recommended Posts

I have a DoubleClick banner I'm building that has dynamic text fields that contain line break elements within the string. So the raw string might be something like:

var textOne = "This would<br/>be loaded<br/>dynamically from DoubleClick";

So when I try to use the Text Plugin as it loads the text into the element in the DOM you will briefly see a "<" character pop up before the rest of the element is inserted into the DOM and parsed as an HTML element.


This doesn't happen when I use the delimiter: " " option to do whole words but the animation doesn't really achieve the effect I'm looking for as we really do want letter by letter insertion. Is there a way to escape an element or otherwise have the Text Plugin ignore these elements?


Additionally, I'm removing the text simply by setting the text to an empty string "" after my delay, with padSpace: true. This produces text that is overwritten from the start of the string when I'd really rather it look like the text is being deleted out. Is there a way to do this that I'm missing?

Link to comment
Share on other sites

Any chance you could provide a reduced test case codepen? I'm just not quite sure I understand your question correctly, and it'd be SUPER helpful to see the problem in context so we can understand exactly what's going on. 

  • Like 1
Link to comment
Share on other sites

Thanks for getting back to me, please view the attached pen. It seems like maybe using the Modifiers plugin as well I could intercept each update and filter the breaks out manually and only insert them when they are completely in. I just was hoping that the plugin had some type of option to filter out or escape substrings to be inserted all at once.


I suppose it might also be possible to use a custom delimiter character like "%" or "#" that is not in the copy and insert those into my strings between each letter of a word, but only on the ends of the line-break elements before passing the strings into the timeline.


It would also be great like I said if there were an option or way to reverse the text that is inserted so that it's overwritten from the end back to the beginning like someone was hitting backspace to erase the text on exit. Is there some way to achieve this using a rewind function to revert the text entry and then a function to skip back over the function that I just rewinded over to avoid playing it again?


See the Pen OmbNRM by dalefenton (@dalefenton) on CodePen

Link to comment
Share on other sites

Thanks for the demo. Very helpful.


TextPlugin wasn't built to honor nested tags or anything fancy like that. 

For what you describe SplitText will do the trick.

Take a look at the following code and demo:

textEl.innerHTML = textStr;
var mySplitText = new SplitText(textEl, {type:"chars, lines"})

var tl = new TimelineMax({ repeat: -1, repeatDelay: 2, yoyo:true });
tl.staggerFrom(mySplitText.chars, 0.01, {opacity:0}, 0.01)



You'll notice there are no funny html characters showing up and it reverses fine (without collapsing). You can reverse the timeline whenever you want from the end using  tl.reverse(0);


SplitText is bonus tool available to Club GreenSock members (Shockingly and Business Green) you can learn more about it here: https://greensock.com/SplitText

  • Like 2
Link to comment
Share on other sites

Appreciate the help, I knew SplitText could do it, but was trying to accomplish it with the TextPlugin since it's hosted on the DoubleClick CDN, where I'd have to package SplitText in my banner (not that that is necessarily the end of the world).



Link to comment
Share on other sites

SplitText is only 8kb zipped; really not bad to include in a banner.

  • Like 3
Link to comment
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.