Best jQuery Animation Plugins & Tutorials with Demo

    Creative Audio Visualizers with p5.js

    Creative Audio Visualizers with p5.js

    Today we’ll explore how to build a basic, line-style music visualization in the browser. We’ll be using p5.js for our drawings and its p5.sound library for analyzing sounds.

    Delighters : CSS Animations on Page Scroll

    Delighters : CSS Animations on Page Scroll

    Delighters is add CSS animations to delight users as they scroll down.

    Features:

    • Declarative
    • Flexible
    • Light footprint
    • Framework-agnostic
    • Supports desktop, mobile & tablets
    • Degrades gracefully to your default styling

    Konva.js : HTML5 2d Canvas Library

    Konva.js : HTML5 2d Canvas Library

    Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

    You can draw things onto the stage, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes. Served hot with a side of awesomeness.

    Animated Fragment Slideshow with Anime.js & Pieces

    Animated Fragment Slideshow with Anime.js & Pieces

    Today we’d like to show you how to create a playful slider with an original fragmented look. Each element of the slider will be divided into pieces that will animate in different ways, using Pieces, a library that I’ve created for achieving interesting effects like these easily.

    Scrolling Letters Animation with Anime.js

    Scrolling Letters Animation with Anime.js

    A switching title effect where a fixed text element changes with an animation depending on the scroll position.Recently we’ve stumbled upon a really nice effect on Akademi’s website: the main title of the page moves along as one scrolls down and changes depending on the section that is currently in the viewport. We thought this would be an awesome effect to recreate and play with different animations for the text as it changes. For detecting when a certain section is entered, we use the Intersection Observer API. Note that the API is currently not supported in Safari.

    Vivify : Free CSS Animation Library

    Vivify : Free CSS Animation Library

    Vivify is free CSS animation library.

    Popmotion : JavaScript Reactive Animation Library

    Popmotion : JavaScript Reactive Animation Library

    Popmotion is a functional, reactive JavaScript motion library.It allows developers to create animations and interactions from actions.Actions are streams of values that can be started and stopped, like tweens, physics and pointer input.

    Actions are unopinionated, so those values can be used to create animations with CSS, SVG, React, Three.js… any API that accepts a number as an input.

    Slice Revealer : Simple Reveal Animation with Anime.js

    Slice Revealer : Simple Reveal Animation with Anime.js

    Today we’d like to share a simple reveal animation.The idea is to cover and uncover an image with slices to either hide or show it. The slices can be vertical or horizontal and can come from different directions. Playing with the number of slices, delays and colors, creates a plethora of possible looks for this effect.We are using anime.js for the animations.

    Sequence.js : Step based Animations Slider

    Sequence.js : Step based Animations Slider

    Sequence.js is a CSS-driven framework for building responsive touch-enabled step-based animations. It is ideal for creating sliders, presentations, banners and other sorts of dynamic components. Among the several premium plans you will find a free one that grants you with a personal open-source license.

    Tuesday : Quirky CSS Animation Library

    Tuesday : Quirky CSS Animation Library

    Tuesday is a stand-alone library you can use without any dependencies, but you can use Tuesday alongside other animation libraries as well. All Tuesday animation names start with td prefix so there is a low chance two libraries will collide unless there is another one that uses the same prefix and animation name.