Best jQuery Animation Plugins & Tutorials with Demo

    Block Reveal Effects with CSS & JavaScript

    Block Reveal Effects with CSS & JavaScript

    Today we’d like to share a couple of ideas for a kind of block reveal effect that has been used in some designs recently. The main idea is to reveal content in a schematic box look. The effect first shows a decorative block element being drawn and when it starts to decrease its size, it uncovers some content underneath.

    Create CSS Glitch Effect with CSS

    Create CSS Glitch Effect with CSS

    In this tutorial we will recreate a simple glitch hover effect using pure CSS.

    Christmas 3D : jQuery Site Decoration Plugin

    Christmas 3D : jQuery Site Decoration Plugin

    Christmas 3D is a premium multi-purpose jQuery library for smart, fast, modern and comfortable site decoration.There are over 15 different images, control of any speed and direction available for your choice!

    Christmas 3D are responsive to any site with natural and intuitive effects. It uses cutting edge technologies to provide the smoothest experience that’s possible, and it comes like easy installable JavaScript library.

    zPath.js : jQuery plugin to Animate SVG Path

    zPath.js : jQuery plugin to Animate SVG Path

    A simple and easy to use plugin to draw any simple svg that uses only paths or any other elements but without fills.

    Floating.js : JavaScript Animated Floating Elements

    Floating.js : JavaScript Animated Floating Elements

    Floating js is a animated float a number of things up on a page (hearts, flowers, emojis, words …).

    Reveal : Scroll Reveal Animations jQuery Plugin

    Reveal : Scroll Reveal Animations jQuery Plugin

    Reveal is a scroll reveal animations framework with unlimited animation possibilities. Reveal animations can be used with any element in your page. Built with the use of jQuery, GSAP and Animus, Reveal is guaranteed to offer an unmatched scroll reveal animation and design experience.

    SlideBox : jQuery Animated Sliding Box

    SlideBox : jQuery Animated Sliding Box

    A simple light-weight jQuery plugin that makes a <div> (or another block element) moving from outside the page to one side of your choice when scrolling to a specific point.

    • uses .animate() with callback function
    • all directions are customizable
    • can be triggered when any DOMElement is visible or at any specific offset
    • closing option for the whole session on the page available

    Tilt Hover Effects with CSS & JavaScript

    Tilt Hover Effects with CSS & JavaScript

    Some ideas for hover animations with a fancy tilt effect. Inspired by the hover effect seen on the Kikk 2015 website.We want to animate an image (which could be a link or simply a normal grid item) with a tilt effect on its parts. Having several elements in the item (that we call “tilter”), we can achieve a variety of effects that look very interesting. There’s the image, the “shine” element, the semi-transparent overlay with a colorful gradient, a border element and the caption.

    Timeline Framework with HTML5 & CSS

    Timeline Framework with HTML5 & CSS

    AWSM Timeline’ is a pack of super cool and interactive timeline layouts for your website. It is rather a basic framework which you can use to build your own style of timeline layouts by making some basic CSS changes. This documentation will help you to integrate the layout easily into your existing HTML files.

    Foxholder : Unique Placeholder Animations with jQuery

    Foxholder : Unique Placeholder Animations with jQuery

    Foxholder is a Pack of 15 unique placeholder animations with jQuery. Just pick the demo you like most and install on your website in 1 minute!