5 Useful and Interesting Web Animation Libraries

Introduction

Libraries help us to code faster through their predefined classes for different functions. Your idea of the project and combining it with the libraries to add functionality, make a great project.

Today, we are going to look int…



Introduction

Libraries help us to code faster through their predefined classes for different functions. Your idea of the project and combining it with the libraries to add functionality, make a great project.

Today, we are going to look into CSS animation libraries to help you add beautiful customizable animation to your web page.

So let’s get started.



Animate.css

Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

Animate.css



Installation

NPM:

$ npm install animate.css --save

SCRIPT:

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>



Usage

You can add the pre-define animation classes to any element to which you want to add the animation.

<h1 class="animate__animated animate__bounce">An animated element</h1>



CodePen Example

Rerun to see the animation again



Anime.js

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

Anime.js



Installation

NPM:

$ npm install animejs --save

SCRIPT:

You can download the script add it to the project download. Link the script as a normal script.

Download script here or visit their GitHub page to download it.

  <script src="anime.min.js"></script>



Usage

Anime.js is one of my favorites to add animation to my projects. You just need to use the anime function and add all the animation parameters to it. You can find more about arguments and values in the documentation here.

anime({
    targets:'.box',
    translateY: 250,
    scale: 2,
    duration: 2000,
    background: '#4C0070',
    borderRadius:50,
    rotate: '1turn',
    easing: 'easeInOutExpo',
    loop:true
})



CodePen Example



Hover.css

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

Hover.css



Installation

NPM:

$ npm install hover.css --save

FILE:
You can download the CSS file and link it in the HTML between head tag. Download it [here] or visit GitHub page of hover.css.

<head>
    <link href="css/hover-min.css" rel="stylesheet">
</head>



Usage

It is a set of predefined classes that you can use as a class name for your element.

<button class="hvr-underline-from-center">
  Click Me!
</button>



CodePen Example



Velocity

Accelerated JavaScript animation. It’s incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling.

Velocity



Installation

NPM:

$ npm install --save velocity-react

SCRIPT:

<script src="//cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.ui.min.js"></script>



Usage

Velocity functions take two objects, the first one is properties and the second one is options. You can define all the properties you want to animate in the properties object. Option object contains different options related to animation such duration, loop, easing, etc.

element.velocity(
  {
    marginTop:200,
  },
  {
    duration:1500,
    loop:true,
    easing:'swing'
  }
)



CodePen Example



Three Dots

The project is a set of CSS loading animations created with three dots which made by just single element. I think the project can not only enhance your CSS skills but also improve your imagination.

Three Dots



Installation

NPM:

$ npm install three-dots --save

FILE:
Include the CSS in your file

<link href="/path/to/three-dots.css" rel="stylesheet">



Usage

You just need to add the class name to the element.

<div class="dot-pulse"/>



CodePen Example



Last Note

These are useful and interesting animation libraries to bring life to the web element. I hope you will use one of the above libraries in your next project.

Thanks for reading the blog post.


Print Share Comment Cite Upload Translate
APA
Suraj Vishwakarma | Sciencx (2024-03-28T14:19:30+00:00) » 5 Useful and Interesting Web Animation Libraries. Retrieved from https://www.scien.cx/2021/11/27/5-useful-and-interesting-web-animation-libraries/.
MLA
" » 5 Useful and Interesting Web Animation Libraries." Suraj Vishwakarma | Sciencx - Saturday November 27, 2021, https://www.scien.cx/2021/11/27/5-useful-and-interesting-web-animation-libraries/
HARVARD
Suraj Vishwakarma | Sciencx Saturday November 27, 2021 » 5 Useful and Interesting Web Animation Libraries., viewed 2024-03-28T14:19:30+00:00,<https://www.scien.cx/2021/11/27/5-useful-and-interesting-web-animation-libraries/>
VANCOUVER
Suraj Vishwakarma | Sciencx - » 5 Useful and Interesting Web Animation Libraries. [Internet]. [Accessed 2024-03-28T14:19:30+00:00]. Available from: https://www.scien.cx/2021/11/27/5-useful-and-interesting-web-animation-libraries/
CHICAGO
" » 5 Useful and Interesting Web Animation Libraries." Suraj Vishwakarma | Sciencx - Accessed 2024-03-28T14:19:30+00:00. https://www.scien.cx/2021/11/27/5-useful-and-interesting-web-animation-libraries/
IEEE
" » 5 Useful and Interesting Web Animation Libraries." Suraj Vishwakarma | Sciencx [Online]. Available: https://www.scien.cx/2021/11/27/5-useful-and-interesting-web-animation-libraries/. [Accessed: 2024-03-28T14:19:30+00:00]
rf:citation
» 5 Useful and Interesting Web Animation Libraries | Suraj Vishwakarma | Sciencx | https://www.scien.cx/2021/11/27/5-useful-and-interesting-web-animation-libraries/ | 2024-03-28T14:19:30+00:00
https://github.com/addpipe/simple-recorderjs-demo