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
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