jQuery Textillate options not creating the expected result

Question

I have this textillate options set, already tried some examples on the web but no animation is running, on what I think is the correct. The objective is to create a button where the first text element goes fadeOutUp letter by letter randomly, and the second text goes fadeInUp randomly as well, this is what I'v tried:

        var textilateoptions = {
            autoStart: true,
            // in animation settings
            in: {
                // set the effect name
                effect: 'fadeInUp',
                // set the delay factor applied to each consecutive character
                delayScale: 20,
                delay: 50,
                sync: true,
                shuffle: true,
                reverse: false,
            },
            // out animation settings.
            out: {
                effect: 'fadeOutUp',
                delayScale: 20,
                delay: 50,
                sync: true,
                shuffle: true,
                reverse: false,
            },
            // set the type of token to animate (available types: 'char' and 'word')
            type: 'char'
        };
        
        $('.btneffect .infobtn').textillate(textilateoptions);
        textilateoptions.autoStart = false;
        $('.btneffect .infobtn2').textillate(textilateoptions);
        
        $('.btneffect').hover(function(){
            $(this).find(".infobtn").textillate('out');
            $(this).find(".infobtn2").textillate('in');
        },function(){
            $(this).find(".infobtn").textillate('in');
            $(this).find(".infobtn2").textillate('out');
        });

Codepen example here

PRAJIN PRAKASH · Accepted Answer · 2021-11-19T07:06:39.930

1

correct here

 // set to true to animate all the characters at the same time
    sync: false,

and version of animate.css

https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css

change

use 3.7.2 instead of 4.1.1

and

sync: true

to

sync: false

make it works

https://codepen.io/prajin-tst/pen/rNzYzwG

edited Nov 19 '21 at 07:06

answered Nov 02 '21 at 07:50

PRAJIN PRAKASH

1,366
1
15
31

Well, that does letter by letter individually, but I'm not seeing any animation tho – Miguel Machado Nov 11 '21 at 15:42
you must use animate version `3.7.2` instead of `4.1.1` – PRAJIN PRAKASH Nov 19 '21 at 07:07

score 0 · Answer 2 · answered Oct 29 '21 at 00:30

Textillate's github page lists a few dependencies like lettering.js and animate.css. You might be missing the animate.css file as when I added the line <link href="http://textillate.js.org/assets/animate.css" rel="stylesheet" /> to your Codepen, I could get the text moving up on mouse over. Observed something similar in a test HTML page(included below) I created with your CSS, Javascript and HTML from Codepen.

<!DOCTYPE html>
<html>
    <head>
        <link href="http://textillate.js.org/assets/animate.css" rel="stylesheet" />
        <style>
            .infobtn {
                width: 100%;
                height: 100%;
                position: relative;
                bottom: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 1;
                color: #f00;
            }
            .btneffect .infobtn2 {
                position: absolute;
                bottom: 0;
                color: #000;
            }
            .btneffect {
                border-bottom: 1px solid #f00;
            }
        </style>
    </head>
    <body>
        <div class="btneffect corpri1 letra14 bold">
            <div class="infobtn animate corpri1">Todos os produtos</div>
            <div class="infobtn2 animate preto">Todos os produtos</div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="https://github.com/downloads/davatron5000/Lettering.js/jquery.lettering-0.6.1.min.js"></script>
        <script src="http://textillate.js.org/jquery.textillate.js"></script>
        <script>
            $(function () {
                var textilateoptions = {
                    autoStart: true,
                    // in animation settings
                    in: {
                        // set the effect name
                        effect: "fadeInUp",
                        // set the delay factor applied to each consecutive character
                        delayScale: 20,
                        delay: 50,
                        sync: true,
                        shuffle: true,
                        reverse: false,
                    },
                    // out animation settings.
                    out: {
                        effect: "fadeOutUp",
                        delayScale: 20,
                        delay: 50,
                        sync: true,
                        shuffle: true,
                        reverse: false,
                    },
                    // set the type of token to animate (available types: 'char' and 'word')
                    type: "char",
                };

                $(".btneffect .infobtn").textillate(textilateoptions);
                textilateoptions.autoStart = false;
                $(".btneffect .infobtn2").textillate(textilateoptions);

                $(".btneffect").hover(
                    function () {
                        $(this).find(".infobtn").textillate("out");
                        $(this).find(".infobtn2").textillate("in");
                    },
                    function () {
                        $(this).find(".infobtn").textillate("in");
                        $(this).find(".infobtn2").textillate("out");
                    }
                );
            });
        </script>
    </body>
</html>

yes, I'v included those files, its in the example.. as you can see.. — Miguel Machado, Nov 11 '21 at 15:42
@MiguelMachado your version is wrong. See the link its working https://codepen.io/prajin-tst/pen/rNzYzwG — PRAJIN PRAKASH, Nov 19 '21 at 07:08

score 0 · Answer 3 · answered Nov 11 '21 at 15:43

0

I'v made my own plugin, thanks anyway

answered Nov 11 '21 at 15:43

Miguel Machado

180
2
3
16

jQuery Textillate options not creating the expected result

3 Answers3