Out Animation in textillate.js is not working

Question

My code is as follows:

<div class="header">
<h1>My text</h1>
</div>
<script>
$(function(){
    $('h1').textillate({in:{} , out:{effect:'hinge'}});
});
</script>

In this, the in-animation works well but the out-animation doesn't work. You can refer to the textillate.js jquery plugin docs.

Answer 1

The out effects are only run as a way to transition to the next in effect unfortunately. Try using empty text as the next transition:

// html
<h1 class="tlt">
    <ul class="texts">
         <li>Some Title</li>   
         <li> </li>
    </ul>
</h1>

// javascript
$('.tlt').textillate();

jsFiddle: http://jsfiddle.net/jschr/y9m3b/

https://github.com/jschr/textillate/issues/5

Answer 2

Adding textilate('out') to the callback function for the 'in' effect worked for me.

This code executes the 'fadeOut' effect after the 'fadeIn' effect.

$('.myclass').textillate({
    loop: false,
    in : {
        effect: 'fadeIn',
        callback: function() {
            $('.myclass').textillate('out');
        }
    },
    out: {
        effect: 'fadeOut',
    }
});