JS library

Ready-to-Use JavaScript Libraries for Web Effects

by

JavaScript is a dynamic, interpreted programming language primarily known for making web pages interactive. It is one of the three core technologies of the World Wide Web, working alongside HTML (for structure) and CSS (for styling) to create rich and engaging user experiences.

This article explores a curated list of ready-to-use JavaScript libraries designed to significantly enhance your website’s interactivity and allow you to implement compelling visual effects on your content.

If you have not checked my past article about JavaScript fundamentals then you can check it here.

Table of contents:

  1. Slick slider
  2. Bootstrap
  3. Autotype
  4. Anime.js
  5. AOS (Anime on Scroll)

1 – Slick slider

Slick Slider is a highly popular, versatile, and responsive jQuery plugin used by web developers to create carousels or sliders on websites.

To use Slick Slider in a web project, you typically need to include the following:

  • The jQuery library (since Slick is a jQuery plugin).
  • The Slick CSS files ( slick.css and optionally slick-theme.css ).
  • The Slick JavaScript file ( slick.min.js ).
  • A simple block of JavaScript code to initialize the slider on a specific HTML element and define your custom settings.

Let’s get started with a step-by-step practical example of implementing a responsive image carousel using the popular Slick Slider library.

Step 1: Create a Project Directory

First, create a new directory on your computer to hold all the project files. For ex. you could name it slick-slider-project.

Step 2: Create an HTML File

Inside your newly created directory, create a file named index.html. This will be the main file for your image slider.

Step 3: Add HTML Code for the Image Slider

Paste the following basic HTML structure into your index.html file. This includes a container for the slider and the necessary <div> elements for the individual slides (images).

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Slick Slider example</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<div class="container">
			<h1>Hello, User!</h1>
			<div class="image-gallery">
				<img src="file1.jpg" alt="file1">
				<img src="file2.jpg" alt="file2">
				<img src="file3.jpg" alt="file3">
			</div>
		</div>
	</body>
</html>
Step 4: Add Some Style to the HTML Code

While Slick provides the necessary CSS for functionality, adding some custom styles will improve the presentation. Add the following <style> block inside your <head> tag in index.html file.

<style>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body { font-family: 'Verdana', sans-serif; }
.container {
	max-width: 1024px;
	width: 100%;
	margin: 0 auto;
}
h1 { margin-bottom: 40px; }
.image-gallery {
	max-width: 300px;
	margin: 0 auto;
}
.image-gallery img {
	width: 300px;
	display: block;
	margin: 0 auto;
}
</style>
Step 5: Download and extract Slick slider files
Step 6: Copy necessary files

From the extracted folder, you need to copy files slick.min.js and slick.css and paste them into your project directory.

Step 7: Include Slick files in the HTML code

Now you need to link these files in your index.html file.

<link rel="stylesheet" type="text/css" href="slick.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="slick.min.js"></script>
Step 8: Add JavaScript code

Now you need to add custom JavaScript code inside <script></script> tag or in the separate JavaScript file.

<script>
        // Initialize Slick on the class 'my-slider'
        $(document).ready(function(){
            $('.image-gallery').slick({
                dots: true,          // Show the dot navigation
                infinite: true,      // Loop the slides
                speed: 500,          // Transition speed
                slidesToShow: 1,     // Show one slide at a time
                adaptiveHeight: true // Adjust height based on current slide
            });
        });
</script>
Step 9 – Final code and output

You can check final code and output here: https://codepen.io/code-hacks/pen/YPqgyje

See the Pen SlickSlider by Code Hacks (@code-hacks) on CodePen.

2 – Bootstrap

Bootstrap is a popular, open-source front-end framework providing pre-written HTML, CSS, and JavaScript to build responsive, mobile-first websites and web applications quickly, offering features like a responsive grid, pre-styled components (buttons, forms, navbars), and utility classes to streamline development and ensure consistency across devices.

It’s a toolkit for developers to create sleek, functional, and visually appealing sites without starting from scratch, saving significant time.

Features of Bootstrap

Mobile-First & Responsive

Designs adapt beautifully to any screen size, from desktops to phones, using media queries and a flexible grid.

Pre-built Components

Offers ready-to-use UI elements like navigation bars, cards, forms, and alerts.

Customizable

Highly extensible with Sass variables and CSS variables, allowing deep theming and styling.

JavaScript Plugins

Includes interactive features like modals, carousels, and dropdowns, with options to use without jQuery in newer versions.

Saves Time

Developers don’t need to write as much CSS and JS from scratch, speeding up development.

How Bootstrap works?

  1. You need to include Bootstrap’s files (via CDN, package manager, or download) in your project.
  2. Then you can use Bootstrap’s predefined CSS classes (e.g., .btn, .container) on HTML elements.

Let’s create one project using Bootstrap:

Step 1:

Create one directory in your local system. Add one html file in this directory. Add html starter code in this html file named index.html.

<!doctype html>
<html>
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Bootstrap Responsive Layout</title>
            <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
      </head>
      <body>
      </body>
</html>
Step 2:

Include Bootstrap CSS file in the <head> tag.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
Step 3:

Include Bootstrap JS file at the end of the file before </body> tag.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
Step 4:

The final code in index.html file is as below.

<!doctype html>
<html>
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Bootstrap Responsive Layout</title>
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
      </head>
      <body>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
      </body>
</html>
Step 5:

You can add html elements in <body> tag and add Bootstrap predefined classes in HTML elements. In the below example I create one Accordion component using Bootstrap classes.

See the Pen Bootstrap Demo by Code Hacks (@code-hacks) on CodePen.

Check another example about Bootstrap Carousel.

See the Pen Bootstrap_Carousel by Code Hacks (@code-hacks) on CodePen.

You can check the full Bootstrap Components list here:

https://getbootstrap.com/docs/5.3/components/carousel

3 – Autotype

Autotype JS generally refers to lightweight JavaScript libraries or custom scripts designed to create an animated typing effect on websites, where text appears as if it is being typed in real-time.

The purpose of this JS library is to create dynamic headers or subtext that cycles through different phrases.

Key features of this library include configurable speeds for typing and deleting, waiting times between words, and the ability to type whole words at once.

How to implement Autotyping effect with Autotype JS

Step 1:

Create a new HTML file with name index.html or whatever you like in your local project directory.

Step 2:

Add starter code in this index.html file.

<!doctype html>
<html lang="en">
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Auto Typing Text Effect</title>
      </head>
      <body>
      </body>
</html>
Step 3:

Include Autotype library at the end of the html file before </body> tag.

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
Step 4:

Create content structure in HTML file.

<body>
            <div class="intro-box">
                  <h1>I'm <span class="auto-input"></span></h1>
            </div>
            <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
            <script type="text/javascript" src="auto-type.js"></script>
</body>
Step 5:

Add custom JavaScript code in auto-type.js file.

let typed = new Typed(".auto-input", {
     strings: ["Code Hacks", "Web Developer", "Content Creator"],
     typeSpeed: 100,
     backSpeed: 100,
     loop: true
});

You can check the final output here.

See the Pen Autotype by Code Hacks (@code-hacks) on CodePen.

4 – Anime JS

Anime JS is an all-in-one animation engine. It is a fast and versatile library for animation.

A lightweight and modular API

Keep your bundle size small by only importing the parts that you need.

Intuitive API

Animate faster with an easy-to-use, yet powerful animation API.

Enhanced transforms

Smoothly blend individual CSS transform properties with a versatile composition API.

Scroll Observer

Synchronise and trigger animations on scroll with the Scroll Observer API.

Advanced staggering

Create stunning effects in seconds with the built-in Stagger utility function.

SVG Toolset

Morph shapes, follow motion paths, and draw lines easily with the built-in SVG utilities.

Springs and draggable

Drag, snap, flick and throw HTML elements with the fully-featured Draggable API.

Runs like clockwork

Orchestrate animation sequences and keep callbacks in sync with the powerful Timeline API.

Responsive animations

Make animations respond to media queries easily with the Scope API.

Let’s create one practical example step by step.

Step 1:

Create a directory in your local system and add index.html, anime.css, and animation.js file in this directory.

Step 2:

Add below HTML code in the index.html file.

<!doctype html>
<html lang="en">
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Animation using anime JS library</title>
            <link rel="stylesheet" type="text/css" href="anime.css">
      </head>
      <body>
            <div class="anime-demo">
                  <div class="row">
                        <div class="square"></div>
                  </div>
                  <div class="row">
                        <div id="css-selector-id" class="square"></div>
                  </div>
                  <div class="row">
                        <div class="square"></div>
                  </div>
            </div>
            <script type="text/javascript" src="animation.js"></script>
      </body>
</html>
Step 3:

Add below link to include anime.js library in the project.

<script src="https://cdn.jsdelivr.net/npm/animejs/dist/bundles/anime.umd.min.js"></script>

Now, we can use anime.js library in our project to create different animations and effects.

Step 4:

Add below code in the anime.css file.

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
}
body {
      font-family: 'Verdana', sans-serif;
      font-size: 16px;
}
.anime-demo {
      max-width: 1140px;
      width: 100%;
      margin: 0 auto;
      margin-top: 40px;
}
.row {
      position: relative;
      display: flex;
      flex-shrink: 0;
      align-items: center;
      height: 32px;
}
.row:not(:last-child) {
      margin-bottom: 8px;
}
.square {
      width: 20px;
      height: 20px;
      background-color: #ffa828;
      border-radius: 4px;
}
Step 5:

Add below custom JavaScript code in the animation.js file to give effects to the squares.

const { animate } = anime;

animate(
      '.square',
      { x: '200px' }
);

animate(
      '#css-selector-id',
      {
            rotate: '1turn',
            loop: true,
            duration: 1000
      }
);

animate(
      '.row:nth-child(3) .square',
      { scale: [1, .5, 1] }
);

You can learn more about anime.js from this link – https://animejs.com/. The final output you can check here:

See the Pen Anime by Code Hacks (@code-hacks) on CodePen.

5 – AOS (Anime on Scroll)

Developed by Michał Sajnóg, AOS (Animate On Scroll) is a lightweight, open-source JavaScript library used by web developers to trigger animations on HTML elements as they enter the browser’s viewport.

Use Cases
  • Viewport Triggering: Elements appear with an animation only when they become visible to the user, improving engagement and performance by not loading all animations at once.
  • Parallax Effects: Moving different layers of content at different speeds during scroll to create an illusion of depth.
  • Scrollytelling: Using scroll-triggered animations to guide a user through a narrative or product showcase as they move down the page.
  • Customization: Developers can adjust duration, delay, easing, and whether the animation happens every time the element is scrolled into view or just once.

Let’s create one practical demo using AOS library.

Step 1:

Create a new directory in your local system and add files index.html, custom.css, and custom.js in the directory.

Step 2:

Add the below html code in the index.html file.

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Anime on Scroll (AOS) example</title>
	</head>
	<body>
            <div>
                  <h2>Animation using fade-up</h2>
            </div>
            <div>
                  <h2>Animation using flip-down</h2>
            </div>
            <div>
                  <h2>Rotate animation</h2>
            </div>
            <div>
                  <h2>Global animation</h2>
            </div>
	</body>
</html>
Step 3:

Now include custom.css file and AOS library css file in the <head>.

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css">
<link rel="stylesheet" type="text/css" href="custom.css">

And include custom.js file and AOS library JavaScript file in the footer.

<script type="text/javascript" src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script type="text/javascript" src="custom.js"></script>
Step 4:

To apply AOS animations, you need to add data-aos attribute to the HTML elements.

<div data-aos="fade-up">
      <h2>Animation using fade-up</h2>
</div>

To configure and initialize AOS library, add AOS.init() function in your custom.js file.

AOS.init({
  duration: 1500,
  easing: 'ease-in-out',
  once: true
});
Step 5:

You can also add custom animations by adding custom css to the custom.css file. Add data-aos attribute to the HTML element.

<div data-aos="custom-rotate">
  <h2>Rotate animation</h2>
</div>

Add below custom css to the custom.css file.

[data-aos="custom-anime"] {
      transform: rotate(-180deg);
      opacity: 0;
      transition-property: transform, opacity;
}

[data-aos="custom-anime"].aos-animate {
      transform: rotate(0deg);
      opacity: 1;
}

Now you can check the full code and final version here:

See the Pen AOS by Code Hacks (@code-hacks) on CodePen.

AOS (Anime on Scroll) library is easy to use. You can add and also customize the animation by adding custom css.

Conclusion

In this guide, we’ve explored the most popular JavaScript libraries that can help you streamline your development process. Keep an eye out for our future posts where we will provide step-by-step practical guides on open-source technologies. Ready to start coding?”

1 thought on “Ready-to-Use JavaScript Libraries for Web Effects”

  1. Pingback: PHP Arrays, Conditions, and Loops with Practical Examples | Code Hacks

Leave a Comment