In this tutorial, we are going to build an animated photo stack, which will use all kinds of fancy effects to transition between a set of images. The effects are implemented purely using CSS3, which means that they run smoothly on modern browsers and mobile devices. We will also make the photo stack advance automatically, so you can use it as a slideshow.
Best jQuery Animation Plugins & Tutorials with Demo
jQuery Animated UI Modal with CSS3
jQuery UI Modal is plugin of jQuery UI. It easy to create modal functionality to the web application (example the modal form …) and to replace the basic functionality provided by the standard javascript alert(), confirm(), and prompt() functions.
Features:
- Easy to use.
- Plugin for jQuery UI .
- open the modal after x milliseconds.
- Support 2 effect and all type of easing.
- Form elements.
- Image support.
- Button support.
- CSS3 animate support.
- 3 callback function onStart | onShow | onClose
Sketch.js : JavaScript Creative Coding Framework
Sketch.js handles all that tedious but necessary stuff that would normally slow you down – setting up an animation loop, creating and managing a graphics context for Canvas or WebGL, cross browser and device event binding and normalisation for mouse, touch and keyboard events, handling window resizes… You get the idea.
Zalki Hover Image : jQuery Plugin
Zalki Hover Img – is a jQuery plugin for image hover animations. Cross browser even IE 7 (even opacity).Easy to use and customize. Supports thirty animation effects from jQuery Easing. No need to adjust the size of the container. The plugin will determine the size of your photos and will automatically adjust the settings, even if on the same page there are photos of various sizes. You can change the appearance of pop-up elements. You can embed your icons, you can adjust the speed of the animation, you can change the color, shape, size …
cgSceneGraph : JavaScript & HTML5 Powerful, cross-platform Animation framework
The cgSceneGraph is a powerful, cross-platform and very easy-to-use animation framework written in JavaScript for the <canvas> tag in HTML5.It’s full object oriented to ease the development of your applications and games.
The power of the framework is inside its concept : the framework itself does not render anything, and provides a lot of cool and useful features. It was designed to be extended : you can use or create an infinite number of extensions of the node class (CGSGNode) to be rendered. You are not, and won’t never be, limited to what the framework provides by itself because it is designed to be extended !
GSAP JS : Professional-Grade JavaScript Animation Library
Animating with code may seem intimidating at first, but don’t worry – the GreenSock Animation Platform (GSAP) was engineered to make it simple and intuitive. The platform is also highly optimized for performance and unprecedented flexibility. Hang in there through the learning curve and you’ll be glad you did.
The GreenSock Animation Platform is a suite of tools for scripted animation. It includes:
- TweenLite: the core of the engine which handles animating just about any property of any object. It is relatively lightweight yet full-featured and can be expanded using optional plugins (like CSSPlugin for animating DOM element styles in the browser, or ScrollToPlugin scrolling to a specific location on a page or div, etc.)
- TweenMax: think of it like TweenLite’s beefy big brother; it does everything TweenLite can do plus non-essentials like repeat, yoyo, repeatDelay, updateTo(), etc. It includes many common plugins too like CSSPlugin so that you don’t need to load as many files. The focus is on being full-featured rather than lightweight.
- TimelineLite: a powerful, lightweight sequencing tool that acts like a container for tweens, making it simple to control them as a whole and precisely manage their timing in relation to each other. You can even nest timelines inside other timelines as deeply as you want. This allows you to modularize your animation workflow easily.
- TimelineMax: extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like repeat, repeatDelay, yoyo, currentLabel(), and many more. Again, just like TweenMax does for TweenLite, TimelineMax aims to be the ultimate full-featured tool rather than lightweight.
- Extras like easing tools, motion paths, plugins, blitting tools, and more
