kandi background
Explore Kits

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

 by   jschr JavaScript Version: 0.4.0 License: MIT

 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
Support
Quality
Quality
Security
Security
License
License
Reuse
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

securitySecurity

  • 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

buildReuse

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

Usage

copy iconCopydownload iconDownload
<h1 class="tlt">My Title</h1>

Options

copy iconCopydownload iconDownload
$('.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 iconCopydownload iconDownload
$('.tlt').on('inAnimationBegin.tlt', function () {
  // do something
});

jQuery Textillate options not creating the expected result

copy iconCopydownload iconDownload
<!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 iconCopydownload iconDownload
    $('.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>

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

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 .

DOWNLOAD this Library from

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

Explore Related Topics

Share this Page

share link
Reuse Pre-built Kits with textillate
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

  • © 2022 Open Weaver Inc.