Textillate Manual triggers

HTML

<link rel="stylesheet" href="http://jschr.github.io/textillate/assets/animate.css">
<script src="http://jschr.github.io/textillate/assets/jquery.lettering.js"></script>
<script src="http://jschr.github.io/textillate/jquery.textillate.js"></script>
<h1 class="tlt">
    <ul class="texts">
        <li>Some text</li>
        <li>Some more text</li>
    </ul>
</h1>

<button class="in">in</button>
<button class="out">out</button>
<button class="next">next</button>

JavaScript

var $tlt = $('.tlt').textillate({ 
    autoStart: false,
    loop: false,
     initialDelay: 2000,
});

var index = 0;

$('.in').on('click', function () {
    $tlt.textillate('in', index); 
});

$('.out').on('click', function () {
    $tlt.textillate('out'); 
});

$('.next').on('click', function () {
    index = (index + 1) % 2;
    $tlt.textillate('in', index); 
});

$tlt.textillate('in');