Best jQuery Animation Plugins & Tutorials with Demo

    AZSlider : jQuery CSS3 Responsive Slider with Editor

    AZSlider : jQuery CSS3 Responsive Slider with Editor

    AZSlider is a quality-designed content and image slider harnessing the power of HTML5 and the control of CSS3. AZSlider contains everything you need to build a modern, eye catching slider for your website. It’s fully responsive and multi-device friendly with touch swipe navigation in iOS and Android. AZSlider has a powerful editor relies on PHP help you create and manage slider with no code at all.

    Animatr : CSS3 animations with HTML5 data-attributes

    Animatr : CSS3 animations with HTML5 data-attributes

    Animatr is a jQuery plugin that allows you to create CSS3 animations using only HTML5 data-attributes.

    • Lay out your animation steps by time (in seconds), percentages, or both.
    • No more @keyframes or browser prefixing
    • Run multiple animations simultaneously in one element

    Animated Text Fills with CSS3 & SVG

    Animated Text Fills with CSS3 & SVG

    A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG.

    In this article I’m going to share my experiments and five ways to create patterned filled text. In three out of these five cases we will retain the ability to select the text. Of course we’d like to have that for every case but with some workarounds we can solve this problem, too.

    SVG Scrolling Animation Triggered By ScrollMagic

    SVG Scrolling Animation Triggered By ScrollMagic

    In today’s ScrollMagic tutorial we will trigger our GreenSock animation based on the scroll position.

    Stackbox.js : jQuery Stackable Modal boxes Plugin

    Stackbox.js : jQuery Stackable Modal boxes Plugin

    Stackbox is a jQuery plugin for creating stackable modal boxes. It’s easy to customize using CSS / LESS.For animations to work, you need to include Animate.css or some other CSS3 keyframe animation library.

    Reveal-it.js : jQuery Animated fade-in Text effect

    Reveal-it.js : jQuery Animated fade-in Text effect

    Reveal-it.js is a jQuery plugin that gradually reveals text from left to right to produce a fade-in effect.

    jQuery Splash Screen Pro

    jQuery Splash Screen Pro
    • Full-screen video and image backgrounds
    • Google Fonts support
    • Multiple screens support
    • YouTube & HTML5 videos
    • Launch a preview from the editor

    Splash Screen Pro uses a 12-column grid system, similar to Bootstrap’s grid system.Everything in the editor is drag and drop. You can create columns and rows and reposition them however you like.

    CSS3 Subtle Click Feedback Effects

    CSS3 Subtle Click Feedback Effects

    Today we’d like to explore some of these click/touch effects, using different animations. While there are many kinds of animations that can be done to provide feedback, we’re particularly interested in the subtle “tap-like” effects.

    A set of subtle effects for click or touch interactions inspired by the visualization of screen taps in mobile app showcases. The effects are done with CSS animations mostly on pseudo-elements.

    Amo.js : JavaScript library for creating CSS3 Animation

    Amo.js : JavaScript library for creating CSS3 Animation

    Amo.js is a javascript library for creating CSS3 animations.You do not care about the css animation’s class and keyframes’s style, focusing on animation is the only thing you need to do.

    CSS Music Visualizer

    CSS Music Visualizer

    Visualizers made entirely from DOM elements and CSS3 Animations and Transforms.There is no SVG, Canvas, WebGL, or visual plug-in used. It takes quite a bit of tweaking to reduce compositing and optimize rendering layers but this is the kind of stuff CSS can do now a days.