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 <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.
#programming-languages #web-development #programming #javascript #javascript-tips
