Split text animation

index.html

<div class="box">
		<p class="split"></p>
</div>

script.js

var textArray = ["Truth is exquisite word.It is wise man's sharp-sword.She comes from immortal,In order to quench immoral,In the life of the poor mortal.She is chanted in choral.Truth cannot be covered Inside the deep dark cloud.She is sweet in Just's mouth.Truth is the secret to grow tall.I must live for the Truth.She gives life to all. "];
function random(min, max){
	return (Math.random() * (max - min)) + min;
}

var times = 0;
function changeText(){
	var getText = textArray[times];

	if(times == textArray.length - 1){
		times = 0;
	}else{
		times++;
	}

	$('.split').text(getText);

	var text = $('.split');
	$(text).lettering();
	textConvert = $('.split').html();
	textConvert = textConvert.replace(/span/g, 'div');
	$('.split').html(textConvert);

	$('.split div').each(function(i){
		$(this).addClass('characters');
		$(this).lettering();
		var width = $(this).find('span').outerWidth(true);
		var height = $(this).find('span').outerHeight(true);
		$(this).css('width', (width != 0 ? width+1 : 10)+'px');
		$(this).css('height', height+'px');

	});

	$('.split div span').each(function(i){
	$(this).addClass('separate');
	TweenMax.from($(this), 2.5, {
		opacity: 0,
		x: random(-500, 500),
		y: random(-500, 500),
		z: random(-500, 500),
		scale: .1,
		delay: i * .02,
		yoyo: true,
		repeat: -1,
		repeatDelay: 5,
	});
});
}
changeText();
setInterval(function(){ changeText(); }, 12000);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>

split-text-animation.markdown

Split text animation

A Pen by Waliya Yohanna Joseph on CodePen.

License.

style.css

html, body {
			height: 100%;
		}

		body {
			overflow: hidden;
		}

		.box {
			max-width: 70vw;
			padding: 30px;
			margin: 0 auto;
			position: relative;
			top: 50%;
			font-size: 30px;
			line-height: 1.5;
			transform: translateY(-50%);
			perspective: 400px;
		}

		.source {
			color: skyblue;
			margin: 0 auto;
		}
  .split{
    text-align:center;
  }
		.split .characters{
			display: inline-block;
		}
		.split .separate{
			position: absolute;
		}