JAVASCRIPT LIBRARIES YOU MIGHT DON’T KNOW ABOUT IT.

1.Tilt.js

A tiny requestAnimationFrame powered 60+fps lightweight parallax tilt effect for jQuery.

Notices:

  • Requires jQuery
  • No CSS is needed
  • Install yarn add tilt.js
Usage
<!DOCTYPE html>
<body>
    <div data-tilt></div> <!-- Tilt element -->
    <script src="jquery.js" ></script> <!-- Load jQuery first -->
    <script src="tilt.js"></script> <!-- Load Tilt.js library -->
</body>
npm
npm install --save tilt.js
CDN

The GreenSock Animation Platform (GSAP) animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery). GSAP is a suite of tools for scripted animation. It includes The GSAP core – The core of the engine which animates any property of any object.

It makes use of tweens and gives you more control over your animations. GSAP makes it easy to create and manipulate your own timeline animations even if you have little to no understanding of JavaScript. This was a small amount of the different animations you can do with GSAP. Check out Greensock’s site to learn more about the library and experiment with different animation techniques.

npm
npm install gsap

 

3.scrollmagic

ScrollMagic is a jQuery plugin that lets you use the scrollbar like a playback scrub control. Using this, you can build some extremely beautiful landing pages and websites. By default ScrollMagic only triggers the animation and the duration of the animation is defined in the GreenSock tween or timeline. When you set the scene duration to 200, it will take the user 200 pixels of scrolling to see the whole tween or timeline from start to finish.

 A plugin-based architecture offers easy customizability and extendability. To implement animations, ScrollMagic can work with multiple frameworks.

npm
npm i scrollmagic
CDN
script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
4. Typed.js

Typedjs is a library that types. Enter in any string, and watch it type at the speed you’ve set, backspace what it’s typed, and begin a new sentence for however many strings you’ve set.

npm
npm install typed.js
CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 
5. Slick

Slick is a fresh new jQuery plugin for creating fully customizable, responsive, and mobile-friendly carousels/sliders that work with any Html elements.

Features:
  • Fully responsive. Scales with its container.
  • Uses CSS3 when available. Fully functional when not.
  • Swipe enabled. Or disabled, if you prefer.
  • Infinite looping.
  • Autoplay, dots, arrows, callbacks, etc…
npm

npm i slick-carousel

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