JavaScript Animation

JavaScript animations are done by programming gradual changes in an element’s style. The changes are called by a timer. When the timer interval is small, the animation looks continuous. JavaScript animations are implemented by adding gradual changes to an element’s style. You can add them in-line as part of your code, or include them in other objects.

 

1.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.

With a built-in staggering system, it can make creating ripples, directional movements, follow-through and overlapping effects appear simple. This system is usable on both timings and properties.

There’s a lot you can do using the built-in callback and control functions. For instance, you can play, pause, control, reverse and trigger events in sync.

CDN

<script src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”></script>

npm
$ npm install animejs --save
2.ScrollReveal

ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport. It was designed to be robust and flexible, but hopefully, you’ll be surprised below at how easy it is to pick up. The library is just 3Kbs in size if minified and requires no dependencies, making installation to new or existing websites quick and easy.  

ScrollReveal supports different types of effects and works well with web and mobile browsers. It intentionally works with a bare-bones configuration, so you can use it as a canvas for your creativity. To maximize the effect of the animations, the creators advise that you use them sparingly.

the simplest method to get you up and running is to simply include the link provided in the documentation before your closing HTML body tag.

<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
npm
npm install scrollreveal

 

3. Vivus.js

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like.

You can choose any of the available animations – Delayed, Sync or OneByOne. Else, you can also create a custom script to draw your SVG. For more flexibility, you can override the animation of each path using a simple JavaScript function.

npm
npm install vivus
CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.3.2/vivus.js"></script>

 

4.AniJs

Among the JavaScript libraries in this list, AniJS is somewhat unique. It allows you to add animations to elements in a simple ‘sentence-like structure, great for folks new to animation. What’s more, its non-specific nature allows almost everyone to use it in routine UX design. It provides an easy and quick method for prototyping and developing UI interfaces.

It does not rely on any third-party library and generally helps to speed up development. It works just as well on Android and iOS, and also in all the popular browsers.

CDN

https://cdnjs.cloudflare.com/ajax/libs/AniJS/0.2.0/anijs-min.js

 

5.Lottie

Lottie is a JSON-based animation file format that you can use on any platform as easily as static assets. They are small files that work on any device and can scale up or down without pixelation. And the best part — Lottie animations don’t require any coding knowledge!

Lottie can run on any browser that supports JavaScript. The animations are stored in plain text and are human-readable. Since the text data is stored in the JSON format, it’s easily assimilated with any JavaScript environment. This makes it a popular animated graphics format to enhance mobile frontends.

npm
npm i --save lottie-react-native
CDN

https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.8/lottie.min.js

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Shopping Cart