JavaScript Animation Examples
The UIZE JavaScript Framework includes scores of excellent examples to get you started. This index lists 33 JavaScript animation examples.
TAKE A STEP-BY-STEP TOUR...
You can take a step-by-step tour through the examples listed on this page. When you get into the tour, you can use the tour navigation bar that will appear just under the title bar to navigate through the examples. Use the arrows to go forward or back, or click on a "notch" on the progress bar to jump straight to an example.
3D Rotation Viewer Easily create a 3D rotation viewer in UIZE that lets users rotate the view of an object a full 360 degrees using a mouse, or finger on the Apple iPad. Animate Position in JavaScript See how to animate the position of an HTML element and how to apply amazingly realistic motion effects like easing, elasticity, bounce, and many more. Animate Size in JavaScript See how to animate the size of an HTML element and how to apply amazingly realistic physics effects like easing, elasticity, bounce, and many more. Animated Buttons with Box Shadow See how to animate CSS3 box-shadow in order to make buttons leap out of the page when you mouse over them and bounce back when you mouse out of them. Bars For Data Comparison See an example that uses bar widgets to create a dynamic bar chart to compare nutritional data for fruits, with slick JavaScript animation effects. Basic HTML Swap See a demo of the HTML swapper widget, which provides a JavaScript animation transition effect when swapping out the HTML that the widget displays. Basic Mask See a mask widget being used to highlight an image in a layout. Switching to highlighting a different image is accompanied by a JavaScript animation. Basic Progress Bar Ever needed a progress bar for your Ajax applications to show that requests are busy and how much longer they may take? This demo will show you how. Coupled Zooming Collection Items See how two instances of the zooming collection item widget can be coupled together to give you a side-by-side zoomed in comparison of two images. Curve Explorer Add pizazz to JavaScript animations - bounce, easing, elasticity, and more. Visualize and experiment with preset curve functions. Or create your own! Deck Swapper See a demo of the deck swapper widget, which provides a JavaScript animation transition effect when swapping from one item in the deck to another. Fading Links Elegant menu animation effects to liven up any dull Web page! This JavaScript example shows you what is possible with the UIZE JavaScript Framework. Fading an Object Animate complex data objects with ease. UIZE supports compound value interpolation. See how an array of two RGB color objects can be faded over time. Hover Fader Color Effects Who needs boring menus when you can have stunning menu animations that will have your users mesmerized! You have to see these effects to believe them. Hover Fader Stretching Menu Stretch the limits of what can be done with animated menus. Using JavaScript to animate CSS style properties can produce amazingly slick effects! Hover Fader Text Shadow Animation Animate the color, horizontal offset, vertical offset, and blur radius properties for any number of CSS3 text shadows to produce amazing menu effects. Hover Fader for Thumbnails See how to liven up image thumbnails with some cool JavaScript animation! Diverse effects can be achieved by animating different CSS style properties. Image Cycle Create a simple JavaScript slideshow experience with the cycling image swap widget. Each image is revealed with a different swap / transition effect. Mantle Slideshow . Scrolly See the scrolly widget in action, as it scrolls two sets of thumbnails - horizontal and vertical - with an accompanying JavaScript animation effect. Scrolly Carousel See the scrolly widget being used to create a scrollable carousel, where scrolling through the pages is accompanied by a JavaScript animation effect. Sequenced Show This demo shows how you can sequence the appearance of thumbnails in a grid, with thumbnails filling in from the top left and bottom right corners. Sequenced Show Using Swap See how thumbnails in a grid of thumbnails can be revealed in a choreographed manner, with a JavaScript animation effect for revealing each thumbnail. Seven Segment Display See an interactive demonstration of a seven segment display widget, much like the classic LED / LCD digit displays on calculators and digital watches. Slideshow With Dissolve See a slideshow demo that transitions from image to image with a JavaScript animation effect and that also displays rating stars using a bar widget. Slideshow With Wipes See an example of a JavaScript slideshow widget with stunning image wipe animation effects that you didn't believe were possible with just JavaScript. Slideshow of Data Who says that a slideshow can only be used to display an image? See this demo - it uses a slideshow to display nutritional data for various fruits. Tabbed Interface With Fade Everyone's seen a basic tabbed interface. Why not add some pizazz to your tabs with a JavaScript animation cross-fade effect! This demo shows you how. Uize.Widget.ImageWipe See stunning image wipe animation effects you didn't believe possible with JavaScript. Choose from dozens of themes. Tweak values to make your own. Uize.Widget.Swap.Image See some amazing possibilities for image transitions using lightweight JavaScript animation. Play with lots of effect themes, and even make your own. Uize.Widget.ThumbZoom Astonish users with a slick animated image preview feature where a larger preview zooms out from a grid of thumbnail images. This demo shows you how. Zooming Collection Item with Image Switching See how the zooming collection item widget is used in combination with an image selector strip to provide an interface for previewing multiple images. Zooming Collection Items Experience the zooming collection item widget. It gives you a lightweight and intuitive preview behavior, with a JavaScript animation zoom-in effect.