Open In App

CSS3 Text Animation using jQuery Textillate Plugin

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn some basic CSS3 text animations using the jQuery Textillate plugin.

Texttillate.js contains some libraries to give the users, an easy-to-use plugin for applying CSS3 animations to any text.

Approach:

  • Download all the dependencies in a folder. Please take care of the file paths in the correct order while implementing the codes given below.
  • Include all the relevant CSS files in the head section of the HTML file.
  • Include all the JavaScript files in the script part of the code.
  • Give a class name to the text you want to apply animation.
  • In the JavaScript part of the code, instantiate the textillate() method using the class name for the text as shown in the codes below.
  • For the above step, use the document.ready() event.

 

Libraries used:

<link href=”assets/animate.css” rel=”stylesheet”>
<link href=”assets/style.css” rel=”stylesheet”>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”> </script>
<script src=”assets/jquery.fittext.js”></script>
<script src=”assets/jquery.lettering.js”></script>
<script src=”jquery.textillate.js”></script>

Example 1: The following code demonstrates the basic initialization of textillate() method of the plugin on the “h2” text.

HTML




<!DOCTYPE HTML>
<html>
  
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link href="assets/animate.css" rel="stylesheet">
    <link href="assets/style.css" rel="stylesheet">
</head>
  
<body>
    <center>
        <h2 class="myClass">
            GeeksforGeeks
        </h2>
  
        <script src=
        </script>
        <script src="assets/jquery.fittext.js"></script>
        <script src="assets/jquery.lettering.js"></script>
        <script src="jquery.textillate.js"></script>
        <script>
            $(document).ready(function () {
                $('.myClass').textillate();
            });
        </script>
    </center>
</body>
  
</html>


Output:

Example 2: In the following example, we have taken an unordered list <ul> with list items <li>. The animation effects are given as “fadeOut” and “fadeIn” as shown below in the code. Refer to the output for better understanding.

 

HTML




<!DOCTYPE HTML>
<html>
  
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link href="assets/animate.css" rel="stylesheet">
    <link href="assets/style.css" rel="stylesheet">
  
</head>
  
<body>
    <center>
        <h2 style="color:green">GeeksforGeeks</h2>
        <p><b>Animate a list</b>
        <p>
        <h3 class="myClass">
            <ul class="texts">
                <li data-out-effect="fadeOut" 
                    data-out-shuffle="true">
                    Learn PHP
                </li>
                <li data-in-effect="fadeIn">
                    Learn CSS
                </li>
            </ul>
        </h3>
  
        <script src=
        </script>
        <script src="assets/jquery.fittext.js"></script>
        <script src="assets/jquery.lettering.js"></script>
        <script src="jquery.textillate.js"></script>
  
        <script>
            $(document).ready(function () {
                $('.myClass').textillate();
  
            });
        </script>
    </center>
</body>
  
</html>


Output:

Example 3: The following code demonstrates the different options applied to attributes in the script part of the code. The developer can try out various options as per the application’s need. Few are shown below.

HTML




<!DOCTYPE HTML>
<html>
  
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link href="assets/animate.css" rel="stylesheet">
    <link href="assets/style.css" rel="stylesheet">
</head>
  
<body>
    <center>
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
        <p><b>Animate a list</b><p>
        <h3 class="myClass">
            <ul class="myTexts">
                <li data-out-effect="fadeOut" 
                    data-out-shuffle="true">
                    Learn PHP
                </li>
                <li data-in-effect="rollIn">
                    Learn CSS
                </li>
            </ul>
        </h3>
  
        <script src=
        </script>
        <script src="assets/jquery.fittext.js"></script>
        <script src="assets/jquery.lettering.js"></script>
        <script src="jquery.textillate.js"></script>
  
        <script>
            $(document).ready(function () {
                $('.myClass').textillate({
  
                    // Selector of multiple texts to animate
                    selector: '.myTexts',
  
                    // Enable looping
                    loop: false,
  
                    // Sets the minimum display time for
                    // each text before it is replaced
                    minDisplayTime: 3000,
  
                    // Sets the initial delay before
                    // starting the animation         
                    initialDelay: 50,
  
                    // Automatically start animating
                    autoStart: true,
  
                    // Character is shown/hidden 
                    // before or after animation
                    inEffects: [],
  
                    // Set 'out' effects
                    outEffects: ['hinge'],
  
                    // In animation settings
                    in: {
                        // Set the effect name
                        effect: 'fadeInLeftBig',
  
                        // Set the delay applied to
                        // each character
                        delayScale: 1.5,
  
                        // Set the delay between
                        // each character
                        delay: 100,
  
                        // Set to true to animate all the
                        // characters at the same time
                        sync: false,
  
                        // Randomize the character sequence            
                        shuffle: true,
  
                        // Reverse the character sequence            
                        reverse: true,
  
                        // Callback once the animation
                        // has finished
                        callback: function () { }
                    },
  
                    // Out animation settings.
                    out: {
                        effect: 'hinge',
                        delayScale: 1.5,
                        delay: 100,
                        sync: false,
                        shuffle: true,
                        reverse: true,
                        callback: function () { }
                    },
  
                    // Callback once textillate
                    // has finished
                    callback: function () { },
                      
                    // Set type as 'char' or
                    // 'word'to animate 
                    type: 'word'
                });
            });
        </script>
    </center>
</body>
  
</html>


Output:

Example 4: The following code demonstrates the event handling triggered by the textillate plugin. An example is shown for the “In animation end” and “Out animation begin” events. JavaScript alert messages are thrown at various events.

HTML




<!DOCTYPE HTML>
<html>
  
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link href="assets/animate.css" rel="stylesheet">
    <link href="assets/style.css" rel="stylesheet">
</head>
  
<body>
    <center>
        <h2 class="tlt">GeeksforGeeks</h2>
        <h3 class="tlt">
            <ul class="texts">
                <li data-out-effect="fadeOut" 
                    data-out-shuffle="true">
                    Learn PHP
                </li>
                <li data-in-effect="fadeIn">
                    Learn CSS
                </li>
            </ul>
        </h3>
          
        <script src=
        </script>
        <script src="assets/jquery.fittext.js"></script>
        <script src="assets/jquery.lettering.js"></script>
        <script src="jquery.textillate.js"></script>
  
        <script>
            $(document).ready(function () {
                $('.tlt').textillate();
                $('.tlt').on('inAnimationEnd.tlt', function () {
                    alert("In animation came to an end");
                });
                $('.tlt').on('outAnimationBegin.tlt', function () {
                    alert("Out animation Began");
                });
            });
        </script>
    </center>
</body>
  
</html>


Output:



Last Updated : 29 Oct, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads