DEV Community

loading...

35 Animation Library CSS Javascript For Developer

haycuoilennao19 profile image haycuoilennao19 Originally published at en.niemvuilaptrinh.com ・9 min read

What Is Web Animation?

Animation is motion effects set up for objects in HTML pages to attract attention and increase user experience when using the website. Usually animations will be created from HTML5, CSS3, Javascript, SVG ... And to create beautifully designed motion effects for web objects, we will need a lot of effort and time to write code. Hence, you should use the css javascript animation libraries to reduce the time and effort of coding.

Animation Library For Website


Animejs

Animejs is an open source library built in Javascript with small size. It makes it easy to animate your website. Animej can animate with CSS properties, SVG, DOM, Javascript objects ... in web pages with just a single API.
Animejs
Link Animejs


MOJS

MOJS is an open source javascript motion effects library with quick and easy setup for web pages. It helps to improve the user experience when using the website, enrich your content more intuitively or create interesting animations ... It can also be displayed on multiple screens of the device. be. The difference of this library is that you can reduce the file size by dividing the modules and have high stability with more than 1580 technical tests for the library.
MOJS
Link MOJS


KUTE.js

KUTE.js is an open source library built in Javascript that aims to accommodate modern and beautiful motion effects during your web development. It integrates many features, construction tools and other assistive attributes in creating advanced and complex motion effects. The documentation is also very detailed, with lots of visualized examples that make it easy to understand and apply to your web project.
KUTE.js
Link KUTE.js


GREENSOCK

GREENSOCK is a library that helps you create beautiful motion effects that are displayed on many different device screens. It can animate almost all objects in the website through CSS properties, canvas library object, SVG, React, Vue ... And it also optimizes maximum performance for those motion effects as well as bring stability to the website through high-tech tests. In addition, GREENSOCK also has articles detailing new features and a GREENSOCK developer forum to help us answer questions during application to our web projects.
GREENSOCK
Link GREENSOCK


Particles.js

Particles.js is an open source library that helps you create beautiful and interesting motion effects for your website. Its strengths are compact size, easy to use and offers many features that give you flexibility in applying to different websites. In addition it also has the function to help you preview the motion effects created by you through the properties that we change on its demo page.
Particles.js
Link Particles.js


SVG.js

SVG.js is an open source library with over 8k likes on Github. It provides a full range of features to help you create an SVG animation for your website quickly and easily. In addition, SVG.js also has some other strengths such as many support plugins, easy to change motion effects such as color, size, position ... of the object, can be easily extended. Through the division by small modules, detailed documentation with specific examples for each feature ...
SVG.js
Link SVG.js


Velocity.js

Velocity.js is an open source library inspired by Jquery's $ .animate (). It is Jquery's perfect match with CSS3. When you replace $ .animate () with $ .velocity (), you will see a significant change in the performance of your website especially above for mobile devices. Why is it used alongside Jquery but has better performance? The library creator has synchronized DOM to minimize the layout and use of caching to minimize the number of DOM queries.
Velocity.js
Link Velocity.js


Vivus.js

Vivus.js is an open source javascript library that helps you create SGV motion effects for web pages. In addition to providing built-in effects, it also provides additional features that allow you to create your own SVG animation effects. It is divided into 3 main types of motion: Delayed which determines the delay for each element, Sync all elements will start and end at the same time, OneByOne each element will be drawn in turn. This you can refer to the example in the demo page to make it easier to understand!
Vivus.js
Link Vivus.js


Typed.js

Typed.js is an open source library that helps you create type motion effects for your web page content. You can set the display time, the effect delay, the type of content to be animated ... And for a more visual view you can see the example in the demo page.
Typed.js
Link Typed.js


Choreographer-js

Choreographer-js is a simply designed library that makes it easy for you to create complex CSS motion effects for your website. It provides a number of properties that you can easily tweak and extend during use, such as choosing motion types, setting styles for objects, and setting motion effects based on events like mousemove , scroll ...
Choreographer-js
Link Choreographer-js


Vivify

Vivify is a source code library was built with CSS3 help you easy to use the effect to move information through class call for object that we want to be in page. With over 50 effects help you make available a wider variety of websites for your website.
Vivify
Link Vivify


Micron.js

Micron.js is an open source library built with CSS3 and controlled via Javascript. You can easily add interactions to objects using the data-micron property, bind interactions with other objects via data-micron-bind = "true" and adjust the motion effect. such as motion type, motion timing ... easily through the use of data-attributes. You can refer to the manual section of this library.
Micron.js
Link Micron.js


MoveTo

MoveTo is a Javascript built library with a size of only about 1kb (after compression) that makes it easy to create motion effects when the user scrolls the web page. In addition, it provides some other customizations to suit many types of websites such as setting motion time, effect type, using callback function ...
MoveTo
Link MoveTo


ScrollReveal

ScrollReveal is an open source library that makes it easy to create scrolling effects for web pages. It can also be displayed on many different device screens and runs on most of the popular web browsers today. ScrollReveal also provides additional functional customizations to easily expand during use, such as choosing the effect to be displayed on any device, determining runtime or delay for effects, repeating effects move...
ScrollReveal
Link ScrollReveal


Popmotion

Popmotion is a JavaScript-built motion library that allows you to develop motion effects across multiple environments (browsers, NodeJs ...) or objects in web pages through CSS, SVG, Canvas ... With its compact size and many useful features, I think this is a good library for creating motion effects for our website.
Popmotion
Link Popmotion

Motio

Motio is a small Javascript library that helps you to animate your website. It is applicable to many different types of web projects and is heavily optimized for your website's performance.
Motio
Link Motio


Animate.css

Animate.css is a library with pre-set motion effects. You just need to download animate.css file and call the class by the effect name for the object in the web page that you create an animation for. Because it's written in CSS3, you can apply it to a wide variety of web projects quickly and easily. In addition, it also provides some classes with useful features such as defining the delay time, for example the class animate_delay-2s will delay 2s, determine the speed of the motion effect, for example class animate_slower: execution time the effect is 3s ...
Animate.css
Link Animate.css


Magic

Magic is also a built in CSS3 library that helps you create animations easily and quickly. It also has a lot of special and interesting motion effects, you can refer to the demo page to see detailed examples.
Magic
Link Magic


AniJS

AniJS is a built in javascript library that makes it easy to process CSS3 animations through the data-anijs property placed in the HTML object. With a size of only about 9kb, do not use additional libraries and display well on many different devices, I think this is a good library for creating motion effects for your website. In addition, its demo page has a tool that lets you preview the motion effects and automatically generate code to apply to your website.
AniJS
Link AniJS


WOW.js

WOW.js is a library that builds scrolling effects for web page objects. Its outstanding feature is that it can easily fine-tune effects such as delay time, style, object position ...
WOW.js
Link WOW.js


Animate Plus

Animate Plus is a JavaScript-built motion effects library with a focus on performance and flexibility when applied to the web. It has a lot of properties to help you fine-tune your motion effects such as determining execution time, using loops, combining blurring ... You can consult more through wallets. Example in the Example section of the library's Github page!
Animate Plus
Link Animate Plus


Wicked CSS

Wicked CSS
Link Wicked CSS


Repaintless.css

Repaintless.css
Link Repaintless.css


Emergence.js

Emergence.js
Link Emergence.js


Animatelo

Animatelo
Link Animatelo


Mimic.css

Mimic.css
Link Mimic.css


basicScroll

basicScroll
Link basicScroll


Blotter.js

Blotter.js
Link Blotter.js


cta.js

cta.js
Link cta.js


Rekapi

Rekapi
Link Rekapi


Lottie

Lottie
Link Lottie


Bounce.js

Bounce.js
Link Bounce.js


TypeIt

TypeIt
Link TypeIt

If you want information please go to Niemvuilaptrinh

Discussion (7)

pic
Editor guide
Collapse
jdnichollsc profile image
Juan David Nicholls Cardona • Edited

What do you think about WebComponents? Check my example with more than 500 animations (Including Animate.css and others): proyecto26.com/animatable-component/

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks sharing.

Collapse
matteobruni profile image
Matteo Bruni

You forgot tsParticles

GitHub logo matteobruni / tsparticles

tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.

banner

tsParticles - TypeScript Particles

A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready!

Particles.js converted in TypeScript, dependency free (*), improved with new cool 😎 features and various bugs fixed and it's actively maintained!

jsDelivr Cdnjs npmjs npm lerna CodeFactor Codacy Badge Gitpod Ready-to-Code Run on Repl.it

Do you want to use it on your website?

This library is available on the two most popular CDNs and it's easy and ready to use, if you were using particles.js it's even easier.

You'll find the instructions below, with all the links you need, and don't be scared by TypeScript, it's just the source language.

The output files are just JavaScript. 🀩

CDNs and npm have all the sources you need in Javascript, a bundle browser ready (tsparticles.min.js) and all files splitted for import syntax.

If you are still interested some lines below there are some instructions for migrating from…

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks about inofomation.

Collapse
wanghao221 profile image
Mr.Wang hao

Nice share!!!

Collapse
haycuoilennao19 profile image
haycuoilennao19 Author

Thanks Wang hao.

Collapse
andrewbaisden profile image
Andrew Baisden

Animejs been meaning to try that one out.