DEV Community

Cover image for 5 JavaScript Animations You'll Want On Your Website
Ordinary Coders
Ordinary Coders

Posted on • Originally published at ordinarycoders.com

5 JavaScript Animations You'll Want On Your Website

#javascript #tutorial #webdev

JavaScript animation libraries handle complex animations that quickly create strong visual components. Use built-in properties to add rotations, translations, eases, and reveals to your website within minutes.

We gathered a list of some of the most visually interesting animation libraries that create a strong first impression on the page load.

CDNs (Content Deliver Networks) will be used throughout the article for the sake of quick development, but all of these JavaScript libraries can be downloaded into your project.

Note: We encourage you to spend some time implementing these JavaScript libraries in small sections on your website. If you are too heavy-handed with animations, the user may find the site overwhelming and the animations could look gimmicky.

ScrollReveal

ScrollReveal is a JavaScript library created by Julian Lloyd. When implemented, the JS library reveals HTML elements as they enter or leave the viewport. Compatible with all major browsers, it is easily added to as many HTML elements as desired.

(1) Add the ScrollReveal CDN to the element: 

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <!--ScrollReveal JS-->
    <script src="https://unpkg.com/scrollreveal"></script>
  </head>
  <body>

    ...

  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Generally speaking, JavaScript CDNs can be added to the <head> element or right before the closing <body> tag. However, the ScrollReveal documentation recommends the CDN be added to the <head> element to prevent a flicker of content before the ScrollReveal is implemented.

If you are using Bootstrap:

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <!--Bootstrap CSS-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <!--ScrollReveal JS-->
    <script src="https://unpkg.com/scrollreveal"></script>
  </head>
  <body>


    ...

    <!-- Optional Javascript -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

If you are using Bootstrap, just add the ScrollReveal CDN after the Bootstrap CSS CDN.

For production:

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <!--ScrollReveal JS-->
    <script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
  </head>
  <body>

    ...

  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Add the ScrollReveal CDN, specifying a fixed version of ScrollReveal and using the minified distribution, to the

element.

(2) Identify the element you wish to animate: 

<div class="container p-4">
    <div class="card reveal-card"> #custom ScrollReveal class
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

ScrollReveal calls elements based on their class attribute values. We will add a custom class for this example called, reveal-card.

(3) Use the ScrollReveal constructor: 

// Card reveal
ScrollReveal().reveal('.reveal-card');
Enter fullscreen mode Exit fullscreen mode

With the CDN added and class attribute value identified, we can now use the constructor function ScollReveal(). Add constructor then the reveal() method to create the reveal animation. Within this method, specify the custom class as the target.

(4) Add the constructor: 

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <!--ScrollReveal JS-->
    <script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
  </head>
  <body>

    ...
    <script>
    // Card reveal
    ScrollReveal().reveal('.reveal-card');
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The script can be added to a separate JS file or placed directly in the HTML template. The code above shows it placed directly in the HTML template. If you are interested in adding it to a seperate JS file, learn how to use Django static assets.

(5) Add customizable options to ScrollReveal:

To add a delay:

// Card reveal
ScrollReveal().reveal('.reveal-card', {deplay:500});
Enter fullscreen mode Exit fullscreen mode

You can also choose to add options to the reveal method, such as a delay. This is measured in milliseconds.

To add a duration:

// Card reveal
ScrollReveal().reveal('.reveal-card', {duration:500});
Enter fullscreen mode Exit fullscreen mode

Duration is another ScrollReveal option measured in milliseconds. It controls how long the animation takes to complete.

To add an interval:

// Card reveal
ScrollReveal().reveal('.card', {interval:500});
Enter fullscreen mode Exit fullscreen mode

The interval option is great if you wish to reveal a set of cards or objects one at a time. Rather than using a custom class attribute value, using the Bootstrap card class attribute is an easy way to add the option to all card elements. Again, this is measured in milliseconds.

(6) Add the load hidden custom class to the CSS: 

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <!--ScrollReveal JS-->
    <script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
    <style>
     /*ScrollReveal load-hidden CSS*/
        .sr .load-hidden {
           visibility: hidden;
        }
    </style>
  </head>
  <body>

    ...
    <script>
    // Card reveal
    ScrollReveal().reveal('.reveal-card');
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Adding the CDN to the <head> element helps prevent the flicker, but only with a fast internet connection. To account for slow internet, create a custom CSS declaration called load-hidden. This can be in a stylesheet.css file or a <style> element in the HTML template, much like the constructor.

<div class="container p-4">
    <div class="card reveal-card load-hidden"> #a load-hidden to the element
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

The custom CSS declaration needs to be added as a class attribute value to the HTML element you are revealing. Then on the page load, there will no longer be any flicker.

Documentation: ScrollReveal

Typed.js

The next JavaScript library is Typed.js, a library by Matt Boldt. The library prints out strings of your choice as if you were typing. Like the previous library, Typed.js can be added by downloading the library or using the CDN.

(1) Add the Typed.js CDN: 

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
  </head>
  <body>

    ...

    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>   
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Add the CDN right before the closing <body> tag.

(2) Add a Typed.js custom id attribute to the template: 

<div class="container p-4">
    <span id="typed"></span>
</div>
Enter fullscreen mode Exit fullscreen mode

Typed.js uses id attribute values rather than class attribute values. In the HTML template, add a span tag with a custom id attribute value, in this case typed.

(3) Add the Typed.js script: 

<!DOCTYPE html>
<html>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
  </head>
  <body>

    ...

    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>  
    <script>
       var typed = new Typed('#typed', {
         strings: ['Type anything you want', 'It can type multiple strings'],
       });
    </script> 
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Then in a <script> HTML element or a separate script.js file, add a JavaScript variable and call strings as a property. List the strings as an array with quotations around each phrase. The example above just adds the script to the HTML template.

(4) Customize Typed.js:

To add a type speed:

var typed = new Typed('#typed', {
    strings: ['Type anything you want', 'It can type multiple strings'],
    typeSpeed: 80,
  });
Enter fullscreen mode Exit fullscreen mode

Add a speed at which the letters are typed in milliseconds.

To add a start delay:

var typed = new Typed('#typed', {
    strings: ['Type anything you want', 'It can type multiple strings'],
    startDelay: 80,
  });
Enter fullscreen mode Exit fullscreen mode

Add a start delay to the typing. This is also in milliseconds.

To add a backspeed speed:

var typed = new Typed('#typed', {
    strings: ['Type anything you want', 'It can type multiple strings'],
    backSpeed: 80,

  });
Enter fullscreen mode Exit fullscreen mode

Specifying a back speed determines the backspacing speed (in milliseconds) of the typing.

To add a smart backspace:

var typed = new Typed('#typed', {
    strings: ['Type anything you want', 'It can type multiple strings'],
    smartBackspace: true, // this is a default
  });
Enter fullscreen mode Exit fullscreen mode

Adding the smart backspace allows backspacing only on the part of the string that does not match the previous string.

For example, if you have two strings "I know CSS" and "I know JS" the smart backspace will only backspace to "CSS" keeping the part of the string that is repeated in the second string.

To add a loop:

var typed = new Typed('#typed', {
    strings: ['Type anything you want', 'It can type multiple strings'],
    loop: true,
    loopCount:1,
  });
Enter fullscreen mode Exit fullscreen mode

The final customization will talk about is loop. Choose to loop through the typing and add the property loopCount if you wish to specify the amount of loops.

For more properties check out the documentation linked below.

Documentation: Typed.js

For the rest of the list please visit: ordinarycoders.com

Top comments (0)

Read next

nnamdi_nwaocha_6d2abd27d1 profile image

Guide to Building a REST API with Deno and Oak Framework

nnamdi nwaocha -

steve8708 profile image

Introducing Visual Copilot 2.0: Design to Interactive

Steve Sewell -

harold_defree profile image

Essential Laravel Tips form and for Entry-Level Developers 🚀

Harold Defree -

kairoeder profile image

Storybook: The Workshop for Modern Frontends

Kai Röder -