AnimIt - demo5

Custom tween

by b1ncer

HTML

<script src="https://npmcdn.com/[email protected]/dist/anim-it.js"></script>
<textarea id="area"></textarea>

CSS

#area {
	width: 100%;
	height: 600px;
	background: transparent;
	border: none;
	outline: none;
	line-height: 1.5;
	font-size: 16px;
}

JavaScript

var str = "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.Declarative views make your code more predictable and easier to debug.";
var area = document.getElementById('area');

function moveEnd(textarea) {
	textarea.focus();
	var len = textarea.value.length;
	if (document.selection) {
		var sel = textarea.createTextRange();
		sel.moveStart('character',len);
        sel.collapse();
        sel.select();
	} else {
		textarea.selectionStart = textarea.selectionEnd = len;
	}
}

function tweenConcatStr(str) {
	return function(progress) {
        progress = progress > 1 ? 1 : progress;
        progress = progress < 0 ? 0 : progress;
		return str.slice(0, Math.round(str.length * progress));
	};
}

AnimIt({
	tween: tweenConcatStr(str),
	duration: 10000,
	onUpdate: function(value) {
		area.value = value;
		moveEnd(area);
	}
})();