Best jQuery Animation Plugins & Tutorials with Demo

    jQuery Zoom Scroller

    jQuery Zoom Scroller

    Zoom Scroller let you add a smooth subtle zoom in/out animation to images when scrolling.

    Ideas for Subtle Hover Effects with CSS3

    Ideas for Subtle Hover Effects with CSS3

    Some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and pseudo elements.

    funnyText.js : Create funny and crazy moving Texts with jQuery

    funnyText.js : Create funny and crazy moving Texts with jQuery

    Create funny and crazy moving texts in a simple way.The plugin to create funny texts effects for your texts. Ideal for titles, it is a great way to give your site a touch of life in a simple and smart way.Easy to apply to different texts in the same page and with different options such as color, size, speed…

    Menu Transition In Effects with jQuery

    Menu Transition In Effects with jQuery

    This one here is something I thought of after seeing the surge in popularity with push in side menus. I’ve seen a couple websites use menu transition to animate the menu items as they appear. Here I will show a simple effect of making the menu links stack upwards. The second effect I created is a Metro inspired menu that stacks upwards but uses random delays to make it look unique every time.

    Fancy Textbox Animations using jQuery

    Fancy Textbox Animations using jQuery

    Today’s freebie is a combination of jQuery and CSS3 animations we call it FancyText. FancyText is a text box plugin that automatically converts standard HTML input element to an animation composite control, with lots of transitions too choose from.

    Trigons – Create and Animate Abstract SVG Images

    Trigons - Create and Animate Abstract SVG Images

    Trigons is a flexible JS script which lets you create modern and stylish abstract SVG images with optional animations

    Trigons script is coded as plugin for d3.js library (d3js.org) and it uses d3’s build-in method of Delaunay triangulation for creating colored and animated abstract images. No jQuery needed.

    Features:

    • The exclusive feature of Trigons images, that they can be animated with 30 built-in effects.
    • Created Trigons SVG images can be responsive.
    • Retina perfect
    • Flexible and powerful settings
    • Works in all modern browsers
    • Any color, any size
    • Clean bright or flat colors or gradients
    • Build-in Color Palette Generator
    • Convert to PNG
    • Use it as “background-image”
    • Dynamic add, update, animate and convert with 7 JavaScript methods
    • Click, Hover and “Viewport” events
    • Separate “In” and “Out” Animations
    • “Force” Animation Methods
    • Use it via JavaScript and/or via HTML5 data attributes

    Create a Tiled Background Slideshow with CSS3

    Create a Tiled Background Slideshow with CSS3

    A tutorial that shows how to recreate the four tiles slideshow effect seen on the website of Serge Thoroval. Using 3D transforms, transitions and animations, the aim is to implement a smooth effect and add some variations.

    ScrollMe : jQuery plugin for Animated Scrolling Effects

    ScrollMe : jQuery plugin for Animated Scrolling Effects

    Scrollme is a jQuery plugin for adding simple scrolling effects to web pages. As you scroll down the page ScrollMe can scale, rotate, translate and change the opacity of elements on the page. It’s easy to set up and not a single line of javascript is required.

    Ripple LazyLoad Scrolling Effects jQuery WordPress Plugin

    Ripple LazyLoad Scrolling Effects jQuery Wordpress Plugin

    Ripple Lazyload Scrolling Effects WordPress Plugin is First ever made plugin for WordPress Lazy Load Scrolling effects. Till now these effects working only on html but we have now created 20+ Lazy load effects which makes your website more professional and graphically attractive.

    Cube.js : Fancy Rotating CSS3 Cube script

    cube.js : Fancy Rotating CSS3 Cube script

    cube.js is a light script which allows you to add a fancy rotating CSS3 cube to your page!