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.
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.
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.
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.
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.
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 ...
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.
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!
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.
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 ...
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.
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.
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 ...
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...
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.
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.
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 ...
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.
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.
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 ...
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!
Link Animate Plus
Wicked CSS
Repaintless.css
Emergence.js
Animatelo
Mimic.css
basicScroll
Blotter.js
cta.js
Rekapi
Lottie
Bounce.js
TypeIt
If you want information please go to Niemvuilaptrinh
Top comments (7)
What do you think about WebComponents? Check my example with more than 500 animations (Including Animate.css and others): proyecto26.com/animatable-component/
Thanks sharing.
You forgot 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.
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!
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
npmhave all the sources you need in Javascript, a bundle browser ready (tsparticles.min.js) and all files splitted forimportsyntax.If you are still interested some lines below there are some instructions for migrating from…
Thanks about inofomation.
Nice share!!!
Thanks Wang hao.
Animejs been meaning to try that one out.