jqueryjquery-textillate

Why is textillate.js not working on window resize?

I want to animate my heading whenever the window is resized into pc and mobile view but Textilate only executes on reload.

This is my code:

function animateHeading() {
    $('#skysea').textillate({ 
        in: { effect: 'fadeInRight' } 
    });
    $('#on').textillate({ 
        initialDelay: 300,
        in: { effect: 'fadeInRight' } 
    });
    $('#cloud').textillate({ 
        initialDelay: 500,
        in: { effect: 'fadeInRight' } 
    });
}

$(window).resize(function() {
    if($(window).width() < 769) {
        animateHeading();
    }
    if($(window).width() >= 769) {
        animateHeading();
    }
});

I want to animate text when the window is resized to pc or mobile view without reloading the page.

Solution

  • As per the documentation:

    $element.textillate('start') - Manually start/restart textillate

    Also, your resize functionality is always going to call animateHeading as you're checking if the width is less than 769 and then checking if it's equal to or greater than 769.

    Here's a live example (I've moved the textillate selectors/options into a global variable so it can be accessed by both functions):

    $(function() {
    // key/val object of selector => textillate options
    var animations = {
        '#skysea': {
            in: { effect: 'fadeInRight' }
        },
        '#on': {
            in: { effect: 'fadeInRight' }
        },
        '#cloud': {
            initialDelay: 500,
            in: { effect: 'fadeInRight' }
        }
    }

    // call textillate using selector/options
    function animateHeading() {
        for (var selector in animations) {
            $(selector).textillate(animations[selector]);
        }
    }

    // call .textillate('start') to start/restart animation as per documentation
    function restartAnimations() {
        // get the selectors as a single string, i.e. "#skysea,#on,#cloud"
        var selectors = Object.keys(animations).join(",");

        $(selectors).textillate('start');
    }

    // animate headings on page load
    animateHeading();

    // bind restartAnimations function on window resize
    $(window).resize(function() {
        restartAnimations();
    });
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.min.js" integrity="sha256-Tvi6rQj7jAzxY1J8UaFlagR6+ZtWVctieK8pFawiY8Q=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js" integrity="sha256-7sov0P4cWkfKMVHQ/NvnWVqcLSPYrPwxdz+MtZ+ahl8=" crossorigin="anonymous"></script>

<p id="skysea">Lorem ipsum dolor sit amet.</p>
<p id="on">Lorem ipsum dolor sit amet.</p>
<p id="cloud">Lorem ipsum dolor sit amet.</p>