textillate | A jquery plugin for CSS3 text animations. | Animation library

by jschr JavaScript Version: 0.4.0 License: MIT

Download this library from

kandi X-RAY | textillate Summary

textillate is a JavaScript library typically used in User Interface, Animation, jQuery applications. textillate has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub, Maven.

See a live demo here. Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations to any text.

Support

Quality

Security

License

Reuse

kandi-support Support

textillate has a medium active ecosystem.
It has 3568 star(s) with 765 fork(s). There are 170 watchers for this library.
It had no major release in the last 12 months.
There are 59 open issues and 40 have been closed. On average issues are closed in 207 days. There are 11 open pull requests and 0 closed requests.
It has a neutral sentiment in the developer community.
The latest version of textillate is 0.4.0

textillate Support

Best in #Animation

Average in #Animation

textillate Support

Best in #Animation

Average in #Animation

quality kandi Quality

textillate has 0 bugs and 0 code smells.

textillate Quality

Best in #Animation

Average in #Animation

textillate Quality

Best in #Animation

Average in #Animation

security Security

textillate has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
textillate code analysis shows 0 unresolved vulnerabilities.
There are 0 security hotspots that need review.

textillate Security

Best in #Animation

Average in #Animation

textillate Security

Best in #Animation

Average in #Animation

license License

textillate is licensed under the MIT License. This license is Permissive.
Permissive licenses have the least restrictions, and you can use them in most projects.

textillate License

Best in #Animation

Average in #Animation

textillate License

Best in #Animation

Average in #Animation

build Reuse

textillate releases are available to install and integrate.
Deployable package is available in Maven.
Installation instructions are not available. Examples and code snippets are available.
textillate saves you 1475 person hours of effort in developing the same functionality from scratch.
It has 3292 lines of code, 0 functions and 6 files.
It has low code complexity. Code complexity directly impacts maintainability of the code.

textillate Reuse

Best in #Animation

Average in #Animation

textillate Reuse

Best in #Animation

Average in #Animation

Top functions reviewed by kandi - BETA

kandi has reviewed textillate and discovered the below as its top functions. This is intended to give you an instant insight into textillate implemented functionality, and help decide if they suit your requirements.

Get data from nodes
Inject injector .
Converts string to boolean

textillate Key Features

A jquery plugin for CSS3 text animations.

textillate Examples and Code Snippets

See all related Code Snippets

Usage

Copy

Download

&lt;h1 class="tlt"&gt;My Title&lt;/h1&gt;

Options

Copy

Download

$('.tlt').textillate({
  // the default selector to use when detecting multiple texts to animate
  selector: '.texts',

  // enable looping
  loop: false,

  // sets the minimum display time for each text before it is replaced
  minDisplayTime: 2000,

  // sets the initial delay before starting the animation
  // (note that depending on the in effect you may need to manually apply
  // visibility: hidden to the element before running this plugin)
  initialDelay: 0,

  // set whether or not to automatically start animating
  autoStart: true,

  // custom set of 'in' effects. This effects whether or not the
  // character is shown/hidden before or after an animation
  inEffects: [],

  // custom set of 'out' effects
  outEffects: [ 'hinge' ],

  // in animation settings
  in: {
  	// set the effect name
    effect: 'fadeInLeftBig',

    // set the delay factor applied to each consecutive character
    delayScale: 1.5,

    // set the delay between each character
    delay: 50,

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

    // randomize the character sequence
    // (note that shuffle doesn't make sense with sync = true)
    shuffle: false,

    // reverse the character sequence
    // (note that reverse doesn't make sense with sync = true)
    reverse: false,

    // callback that executes once the animation has finished
    callback: function () {}
  },

  // out animation settings.
  out: {
    effect: 'hinge',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
    reverse: false,
    callback: function () {}
  },

  // callback that executes once textillate has finished
  callback: function () {},

  // set the type of token to animate (available types: 'char' and 'word')
  type: 'char'
});

Events

Copy

Download

$('.tlt').on('inAnimationBegin.tlt', function () {
  // do something
});

jQuery Textillate options not creating the expected result

Copy

Download

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

-----------------------

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

Textillate JS-JQuery animation is not the selected one (and always the same)

Copy

Download

    $('.tlt').textillate({ in: { effect: 'flipInY' } });

    $('.tlt2').textillate({ in: { effect: 'rollIn' } });

    $('.tlt3').textillate({"loop":true,"in":{"effect":"fadeInDownBig","shuffle":false,"reverse":false,"sync":false},"out":{"effect":"hinge","shuffle":true,"reverse":false,"sync":false}});

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.js"></script>

<div class="tlt">
        Hello world
</div>


<div class="tlt2" >
        Hello world
</div>


<div class="tlt3" >
        Hello world
</div>

-----------------------

    $('.tlt').textillate({ in: { effect: 'flipInY' } });

    $('.tlt2').textillate({ in: { effect: 'rollIn' } });

    $('.tlt3').textillate({"loop":true,"in":{"effect":"fadeInDownBig","shuffle":false,"reverse":false,"sync":false},"out":{"effect":"hinge","shuffle":true,"reverse":false,"sync":false}});

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.js"></script>

<div class="tlt">
        Hello world
</div>


<div class="tlt2" >
        Hello world
</div>


<div class="tlt3" >
        Hello world
</div>

See all related Code Snippets

Community Discussions

Trending Discussions on textillate

jQuery Textillate options not creating the expected result
Textillate JS-JQuery animation is not the selected one (and always the same)

Trending Discussions on textillate

QUESTION

jQuery Textillate options not creating the expected result

Asked 2021-Nov-19 at 07:06

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

ANSWER

Answered 2021-Oct-29 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>

Source https://stackoverflow.com/questions/69665276

QUESTION

Textillate JS-JQuery animation is not the selected one (and always the same)

Asked 2020-Jul-21 at 15:47

I'm using textillate.js to add animation to text. My html page looks like this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Textillate</title>
    <link rel="stylesheet" href="animate.min.css">

    <script src="jquery-3.5.1.min.js"></script>
    <script src="jquery.lettering.js"></script>
    <script src="jquery.textillate.js"></script>
</head>
<body>
    <div class="tlt">
        Hello world
    </div>

    
    <script>
        $('.tlt').textillate({ in: { effect: 'bounceInDown' } });
    </script>
</body>
</html>

where the included scripts and css are taken from the following links:

The problem is that whatever I set as effect in the in object, the result is always the default textillate animation: the chars appear one after the other from left to right, and I can control the order of the appearing letters (e.g. setting shuffle: true, etc..), but not the animation type.

This is pretty much the example code that textillate offers on his github page, so I don't have any idea on where is the problem.

ANSWER

Answered 2020-Jul-21 at 15:47

I think the problem is related to animate.css reference, i change it and it works. Hope it helps.

    $('.tlt').textillate({ in: { effect: 'flipInY' } });

    $('.tlt2').textillate({ in: { effect: 'rollIn' } });

    $('.tlt3').textillate({"loop":true,"in":{"effect":"fadeInDownBig","shuffle":false,"reverse":false,"sync":false},"out":{"effect":"hinge","shuffle":true,"reverse":false,"sync":false}});

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.js"></script>

<div class="tlt">
        Hello world
</div>


<div class="tlt2" >
        Hello world
</div>


<div class="tlt3" >
        Hello world
</div>

Source https://stackoverflow.com/questions/63016717

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install textillate

You can download it from GitHub, Maven.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .