5 JavaScript Animations You'll Want On Your Website

June 30, 2020, 12:01 p.m.

JavaScript · 14 min read

5 JavaScript Animations You'll Want On Your Website

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

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>

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>

Add the ScrollReveal CDN, specifying a fixed version of ScrollReveal and using the minified distribution, to the <head> 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>

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');

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

 

(4) Add the constructor in a script.js file or <script> 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@4.0.0/dist/scrollreveal.min.js"></script>
  </head>
  <body>

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



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 separate 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', {delay:500});

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});

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});

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>




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

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 to the <body> 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>
  </head>
  <body>

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

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>

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>

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,
  });

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,
  });

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,
 
  });

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
  });

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,
  });

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 number of loops.

For more properties check out the documentation linked below.

 

Documentation: Typed.js

 


 

Anime.js

On to Anime.js. This JavaScript animation library was created by Julian Garnier and operates on Chrome, Safari, IE/Edge, Firefox, and Opera browsers. It can be used to animate a variety of targets including a DOM node, CSS selector, or JavaScript object.

 

(1) Add Anime.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>

    ...

      
    <!-- Anime.js JS -->
    <script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script>
  </body>
</html>

Add the Anime.js CDN to the bottom of your HTML document.

 

(2) Find the element, class, or id you wish to animate:

<div class="container p-4">
  	<div class="card mx-3">
  		<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>

In this example, we will be animating a card using the card class attribute value, but you can also choose to animate the HTML element itself or an id.

 

(3) Add the Anime.js function:

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

    ...

      
    <!-- Anime.js JS -->
    <script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script>
    <script type="text/javascript">
    let animation = anime({
        targets: '.card',
        translateX: 100,
    });    
  </script>
  </body>
</html>

The last necessary piece of code is the JavaScript function specifying the targets and properties. The example above translates the card 100px to the right on the page load.

 

(4) Using other Anime.js properties:

To translate an object:

let animation = anime({
    targets: '.card',
    translateX: 100,
    translateY: 100,
});   

translateX moves the object from left or right, along the X-axis, while translateY moves it up or down. The units are pixels.

 

To scale an object:

let animation = anime({
    targets: '.card',
    scaleX: 0.5,
    scaleY: 0.5,
});   

scaleX changes the size of the object horizontally, while scaleY changes the vertical size. Note, if you do not scale evenly on the X and Y axis the object will appear squished or elongated.

 

To rotate an object:

let animation = anime({
    targets: '.card',
    rotateX: 0.5,
    rotateY: 0.5,
});   

rotateX turns the object along its X-axis, while rotateY turns the objects on its Y-axis. 

 

To skew an object:

let animation = anime({
    targets: '.card',
    skewX: 1,
    skewY: 4,
});   

skewX skews the object along its X-axis, while skewY skews the object vertically.

 

To set duration:

let animation = anime({
    targets: '.card',
    duration: 6000
});   

Duration is measured in milliseconds and determines the total time of the animation.

 

To set a delay:

let animation = anime({
    targets: '.card',
    duration: 6000
});   

Delay is also measured in milliseconds and specifies when the animation will start.

 

Those were just some of the basic properties to get you started with the JS library. But Anime.js property parameters are more powerful and create an overall cooler effect when used together. So check out the documentation for more ideas.

 

Documentation: Anime.js

 


 

Chart.js

Evert Timberg is credited as the author of Chart.js, a JavaScript library that allows developers to quickly add charts to your projects. There are 8 charts to choose from and all of it is open-source material. This library is our number one choice for showing clean charts and graphs to users.

 

(1) Add the Chart.js CDN to the <head> 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>
    <!--Chart.js JS--> 
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script> 
  </head>
  <body>

    ...
  
  
  </body>
</html>

Add the Chart.js CDN before the closing <head> tag.

 

(2) Add a chart to a template:

<div class="container">
	<canvas id="myChart" width="400" height="400"></canvas>
</div>

To call a chart, add a <canvas> element to your HTML template. Then specify a custom id and a width and height attributes. This will be the location of the chart in the HTML document.

 

(3) Add the chart data:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
});

Then add the type, data, and chart colors to a <script> HTML element. The script above specifies the chart as a bar chart and can be added directly after the <canvas> HTML element.

 

To create a line chart:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        ...
        }]
    },
});

 

To create a radar chart:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'radar',
    data: {
        ...
        }]
    },
});

 

To create a doughnut chart:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        ...
        }]
    },
});

 

To create a pie chart:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        ...
        }]
    },
});

 

To create a polar area chart:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'polarArea',
    data: {
        ...
        }]
    },
});

 

To create a bubble chart:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bubble',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [
	            {x: -10, y: 3},
	            {x: 4, y: 10},
	            {x: 10, y: 5}
            ],
            ...
        }]
    },
});

For a bubble chart, x and y points need to be defined as data.

 

To create a scatter chart:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [
	            {x: -10, y: 3},
	            {x: 4, y: 10},
	            {x: 10, y: 5}
            ],
            ...
        }]
    },
});

For a scatter chart, x and y points also need to be defined as data.

 

(4) Using Chart.js options:

Adding a chart legend:

var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        legend: {
            display: true,
            labels: {
                fontColor: 'rgb(255, 99, 132)'
            }
        }
    }
});

 

Adding padding:

var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        layout: {
            padding: {
                left: 50,
                right: 0,
                top: 0,
                bottom: 0
            }
        }
    }
});

 

Adding a title:

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        title: {
            display: true,
            text: 'Custom Chart Title'
        }
    }
});

For more options refer to the documentation linked below. We just covered the basics to get you started.

 

Documentation: Chart.js

 


 

Slick

Slick is a handy JS library designed to create carousels with high functionality and minimal effort. Made by Ken Wheeler, Slick is "the last carousel you'll ever need".

 

(1) Add the Slick CDNs to the document:

<!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>
    <!--Slick CSS-->
    <!-- Add the slick-theme.css if you want default styling -->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <!-- Add the slick-theme.css if you want default styling -->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> 
  </head>
  <body>

    ...
    <!--Additional JS-->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.3.1/jquery-migrate.min.js"></script>
    <!--Slick JS-->
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  
  
  </body>
</html>

First, you can add the Slick CSS CDNs to the <head> element. Then add the Slick JS CDN before the end of the <body> element. You will also need to add the jQuery and jQuery Migrate CDNs before the Slick CDN for this library to function correctly.

 

(2) Create the HTML carousel:

<div class="carousel">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
</div>

Then go to the HTML template, create a new division element with a custom class attribute value, and nest division elements equal to the number of slides wanted.

 

If you are looking to use Django models:

<div class="container">
	<div class="carousel">
		{% for c in card %}
	  	<div class="card mx-3">
	  		<div class="card-body">
			    <h5 class="card-title">{{c.title}}</h5>
			    <p class="card-text">{{c.text}}</p>
    		</div>
		</div>
		{% endfor %}
	</div>
</div>

If you are using the carousel to display numerous items, such as products or cards, we recommend using Django models to quickly create the necessary amount of slides using the same bit of code.

 

(3) Add the Slick JS function:

$(document).ready(function(){
  $('.carousel').slick();
});

The last thing you need to get the carousel to function correctly is a JavaScript function located after the CDNs.

 

<!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>
    <!--Slick CSS-->
    <!-- Add the slick-theme.css if you want default styling -->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <!-- Add the slick-theme.css if you want default styling -->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> 
  </head>
  <body>

    ...
    <!--Additional JS-->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.3.1/jquery-migrate.min.js"></script>
    <script>
      $(document).ready(function(){
        $('.carousel').slick();
      });
    </script>
  </body>
</html>

You can choose to place the JS directly below the CDNs or load it as a static asset with Django load static. When you refresh your page, there will be a carousel showing one slide at a time.

 

(4) Add the Slick JS function:

For dots:

$(document).ready(function(){
  $('.carousel').slick({
  dots:true,
  });
});

Add the setting dots as a boolean (i.e. true or false).

 

For arrows:

$(document).ready(function(){
  $('.carousel').slick({
  arrows:true,
  });
});

Add the setting arrows as a boolean (i.e. true or false).

 

For centered slides:

$(document).ready(function(){
  $('.carousel').slick({
  centerMode:true,
  });
});

Use centerMode to center the card in view.

 

To set the speed of the slide:

$(document).ready(function(){
  $('.carousel').slick({
  speed:600,
  });
});

Speed is a time integer in milliseconds.

 

To add autoplay:

$(document).ready(function(){
  $('.carousel').slick({
  autoplay:true,
  autoplaySpeed:1000,
  });
});

Autoplay can be added as a boolean and the autoplay speed is set as an integer in milliseconds.

 

For multiple slides:

$(document).ready(function(){
  $('.carousel').slick({
  slidesToShow: 3,
  dots:true,
  centerMode: true,
  });
});

To show multiple slides at once, set slidesToShow as an integer.

 

Again, those are just the basics of the JS library but refer to the documentation for more settings options.

 

Documentation: Slick


0
Subscribe now

Subscribe to stay current on our latest articles and promos





Post a Comment
Join the community

0 Comments