Best jQuery Animation Plugins & Tutorials with Demo

    Animating Elements Along SVG Paths with JavaScript

    Animating Elements Along SVG Paths with JavaScript

    Path slider is a animating elements along SVG paths with javascript.

    confettiKit : JavaScript Random Confetti Effects & Explosions

    confettiKit : JavaScript Random Confetti Effects & Explosions

    ConfettiKit.js can easily generate random confetti Effects and Explosion with javascript. Easy to Use with html and javascript. Can Create random confetti effects like Happy birthday , celebrations and many more. you can change colors, angle ,rotation of confetti and many more configuration for creating confetti effects.

    Features:

    • Custom Colors
    • Custom Elements like image,text,svg
    • Custom Configuration
    • Light weight

    Woah.css : CSS Animation Library for eccentrics

    Woah.css : CSS Animation Library for eccentrics

    Woah.css is a css animation library for eccentric web developers.Woah.css has three different types of animations to choose from.

    • Woah animations — These are very eccentric and barely practical, but are very fun and showy.
    • Wow animations — These are still a little eccentric, but could very well be used in normal websites.
    • Normie animations — These are very basic.

    CSS Glitch Effect Slideshow

    CSS Glitch Effect Slideshow

    A simple slideshow that uses the CSS Glitch Effect for the slide transitions. In a slideshow we have a different scenario: we want to apply the glitch effect at a specific moment and exchange the image with the new one of the next slide. This kind of animation can also be used for hover effects.

    This slideshow does exactly that: it transitions to the next slide using the glitch effect. Under the hood, it exchanges the glitch layers one by one and stops glitching once the last image is switched.

    Blotter.js : JavaScript API for Drawing Unconventional Text Effects

    Blotter.js : JavaScript API for Drawing Unconventional Text Effects

    Blotter.js is a javascript API for drawing unconventional text effects on the web.

    Blotter provides a simple interface for building and manipulating text effects that utilize GLSL shaders without requiring that the designer write GLSL. Blotter has a growing library of configurable effects while also providing ways for student or experienced GLSL programmers to quickly bootstrap new ones.

    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.