Best jQuery Animation Plugins & Tutorials with Demo

    Carousel with Image Zoom Effect

    Carousel with Image Zoom Effect

    A dead simple Javascript carousel script for cycling through a group of items ( images and content ) with a dot indicator and the arrows.Our “carousel with image zoom effect” comes with simple zoom-in effect for the images, one simple effect for the headlines and clear design which follows all that cool effects. This carousel was built with anime.js.

    Animated Grid Previews with CSS & TweenMax

    Animated Grid Previews with CSS & TweenMax

    Today we’d like to share another CSS grid-powered template with you. The idea is to show a navigation and some scattered images in the background that have a slight parallax effect. Once the “explore” link is clicked, the seemingly randomly placed items animate to their final position in a grid. Each grid has its own unique layout. Once the animation is done, the whole thing becomes scrollable and a content area shows beneath the grid.The animations are powered by TweenMax.

    Splitting.js : JavaScript library to Split an element by Words & Characters

    Splitting.js : JavaScript library to Split an element by Words & Characters

    Splitting.js is a JavaScript microlibrary designed to split (section off) an element in a variety of ways, such as words, characters, child nodes, and more!

    Most Splitting methods utilize a series of <span>s populated with CSS variables and data attributes unlocking transitions and animations that were previously not feasible with CSS.

    Grid Layout with Scrollable Content View

    Grid Layout with Scrollable Content View

    Today we’d like to share a Masonry-powered grid layout with you that has a motion hover effect on the items and a content preview that is scrollable. Once a grid item is clicked, we animate the image to the center of the page and scale it up. The background of the item also scales up, filling the whole page and forming the new background of the content preview. The content preview is scrollable, with some more text showing beneath the image. The animations are powered by TweenMax.

    Multibox Menu : Fullscreen Menu with CSS Grid & TweenMax

    Multibox Menu : Fullscreen Menu with CSS Grid & TweenMax

    Today we’d like to share a simple fullscreen menu with you. The menu layout is powered by CSS Grid and we make its boxes appear with a reveal animation. The animations are made using TweenMax.

    SpriteJS : A lightweight 2D Render Object Model

    SpriteJS : A lightweight 2D Render Object Model

    SpriteJS is a lightweight 2D canvas rendering engine for modern browsers. Manipulate the sprites in canvas as you do with the DOM elements.

    SpriteJS can be used with D3.js, Proton and Matter-js.

    Features:

    • Manipulate the sprites element as you do with the DOM elements.
    • Perform fast drawing with smart cache.
    • Multiple layers.
    • Web Animations Api
    • Controllable event dispatching.
    • Object Oriented Programmed Development with ES6+
    • Server-side render. Work with node-canvas.
    • Weixin Apps

    Integrated-2D : Javascript 2D rendering framework for SVG & Canvas

    Integrated-2D : Javascript 2D rendering framework for SVG & Canvas

    Integrated-2D – is an Open source Javascript framework for rendering 2D graphics on SVG, Canvas and WebGL contexts. I2D’s simple syntax and semantics lets you combine the power of Vector graphics and Bitmap to achieve complex visualisations easily.

    I2Djs provides single Application Programming Interface to create and animate elements across different graphic rendering contexts by leveraging their underlying capabilities. Developers can make use of I2D’s multi-layered contextual approach with capabilities from more than one context seamlessly for creating powerful composite visualisation under a single roof.

    I2D also provides a unique data-driven approach with join-actions for DOM manipulation based on data binding.

    Sal.js : Lightweight Scroll Animation library

    Sal.js : Lightweight Scroll Animation library

    Sal.js is a performance focused, lightweight scroll animation library.Sal (Scroll Animation Library) is written with aim to provide performant and lightweight solution for animating elements on scroll. It’s based on the Intersection Observer, which gives amazing performance in terms of checking the element’s presence in viewport.

    Rotator : jQuery plugin for Rotating Text & Words with CSS3

    Rotator : jQuery plugin for Rotating Text & Words with CSS3

    Rotator is a lightweight and customizable jQuery plugin for rotating text and some words of your text with awesome CSS3 animations.

    Animate Images and Videos with curtains.js

    Animate Images and Videos with curtains.js

    curtains.js was created with just that issue in mind. It is a small vanilla WebGL javascript library that converts HTML elements containing images and videos into 3D WebGL textured planes, allowing you to animate them via shaders.
    You can define each plane size and position via CSS, which makes it super easy to add WebGL responsive planes all over your pages.