how to loop on a set of animations with velocity.js

Question

Hello,

I'm trying to make a string appear and disappear char by char. First I use lettering.js which split my string in as much span element as my string length. Second I use velocity to put some effects on them.

So for example

<div id="demo1" class="demo">
    <h1>Rainbow</h1>
</div>

<script>
        $(document).ready(function() {

            $("#demo1 h1").lettering();

            $(".char1").velocity("transition.whirlIn", 1000);
            $(".char1").velocity({translateX: "201px"});
            $(".char1").velocity({translateY: "20px"});
            $(".char1").velocity({opacity: "0"});   

            $(".char2").velocity("transition.whirlIn", 2000);
            $(".char2").velocity({translateX: "201px"});
            $(".char2").velocity({translateY: "20px"});
            $(".char2").velocity({opacity: "0"});

        });
</script>

It works well and my 2 first caracters move and disappear yiha! But there is no way to loop on all of this. If you look at the doc of velocity, the only way to put several effects on something is to call as much .velocity as you want to add effects...A loop attribute exists but you can't put all of your velocity call in a row.

Does anyone has a clue of how i can do this with velocity? I actually don't want to use animate.

Thanks for your help!

Thomas

Answer 1

Ok, i just found a solution

$("#demo1 h1").lettering('words').children('span').lettering().find('span').velocity({opacity: 0}, 0);

        var titles = ['First title', 'Second title', 'Third title'];
        var titleIndex = 0;

        var transitionsIn = ["flipXIn","slideDownIn","perspectiveLeftIn"];
        var transitionsOut = ["flipXOut","slideUpOut","perspectiveRightOut"];

        function animateText() {
            var transIn = transitionsIn[Math.floor(Math.random()*transitionsIn.length)];;
            var transOut = transitionsOut[Math.floor(Math.random()*transitionsOut.length)];;
            $('#demo1 h1 span span')
                    .velocity("transition." + transIn, {stagger: 100})
                    .delay(2000)
                    .velocity("transition." + transOut, {
                        complete: function(elements) {
                            console.log(elements);
                            titleIndex++;
                            if (titleIndex > titles.length) {
                                titleIndex = 0;
                            }
                            $("#demo1 h1").hide().html(titles[titleIndex]).lettering('words').children('span').lettering().find('span').velocity({opacity: 0}, {
                                complete: function(els) {
                                    $("#demo1 h1").show();
                                    animateText();
                                }});

                        }
                    })
                    ;
        }
        animateText();

Hope it will help!