<div style="transform: translate(352px, 125.5px) rotateZ(0deg); position: absolute; width: 107px; height: 212px; display: inline-block;"><div class="text-container" style="text-align: center; font-family: Arvo; font-size: 38px; color: rgb(0, 0, 0); line-height: 1.4; transform: translate(0px, 0px);">HI welcome<div>home friend</div></div></div>
var mySplitText = nestedLinesSplit(".text-container", {type:"lines"}),
    tl = gsap.timeline();
 
tl.from(mySplitText.lines, {duration: 1, stagger: 2, x: 800});

//magical function
function nestedLinesSplit(target, vars) {
	var split = new SplitText(target, vars),
		words = (vars.type.indexOf("words") !== -1),
		chars = (vars.type.indexOf("chars") !== -1),
		insertAt = function(a, b, i) { //insert the elements of array "b" into array "a" at index "i"
			var l = b.length,
				j;
			for (j = 0; j < l; j++) {
				a.splice(i++, 0, b[j]);
			}
			return l;
		},
		children, child, i;

	if (typeof(target) === "string") {
		target = document.querySelectorAll(target);
	}
	if (target.length > 1) {
		for (i = 0; i < target.length; i++) {
			split.lines = split.lines.concat(nestedLinesSplit(target[i], vars).lines);
		}
		return split;
	}

	//mark all the words and character <div> elements as _protected so that we can identify the non-split stuff.
	children = (words ? split.words : []).concat(chars ? split.chars : []);
	for (i = 0; i < children.length; i++) {
		children[i]._protect = true;
	}

	children = split.lines;
	for (i = 0; i < children.length; i++) {
		child = children[i].firstChild;
		//if the first child isn't protected and it's not a text node, we found a nested element that we must bust up into lines.
		if (!child._protect && child.nodeType !== 3) {
			children[i].parentNode.insertBefore(child, children[i]);
			children[i].parentNode.removeChild(children[i]);
			children.splice(i, 1);
			i += insertAt(children, nestedLinesSplit(child, vars).lines, i) - 1;
		}
	}
	return split;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js