The UIZE JavaScript Framework includes scores of excellent examples to get you started. This index lists 32 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 gigantic arrows that will appear on either side of the example pages to navigate from one page to the next (or back). You can also use the "thermometer" bar, that will appear right underneath the title bar of the example pages, to navigate to other pages in the tour. The highlighted segment of the thermometer shows you where you are in the tour.
-
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.
-
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.
-
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.
-
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.
-
See an example that uses bar widgets to create a dynamic bar chart to compare nutritional data for fruits, with slick JavaScript animation effects.
-
See a demo of the HTML swapper widget, which provides a JavaScript animation transition effect when swapping out the HTML that the widget displays.
-
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.
-
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.
-
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.
-
Add pizazz to JavaScript animations - bounce, easing, elasticity, and more. Visualize and experiment with preset curve functions. Or create your own!
-
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.
-
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.
-
Elegant menu animation effects to liven up any dull Web page! This JavaScript example shows you what is possible with the UIZE JavaScript Framework.
-
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.
-
See how to liven up image thumbnails with some cool JavaScript animation! Diverse effects can be achieved by animating different CSS style properties.
-
Stretch the limits of what can be done with animated menus. Using JavaScript to animate CSS style properties can produce amazingly slick effects!
-
Animate the color, horizontal offset, vertical offset, and blur radius properties for any number of CSS3 text shadows to produce amazing menu effects.
-
Create a simple JavaScript slideshow experience with the cycling image swap widget. Each image is revealed with a different swap / transition effect.
-
.
-
See the scrolly widget in action, as it scrolls two sets of thumbnails - horizontal and vertical - with an accompanying JavaScript animation effect.
-
See the scrolly widget being used to create a scrollable carousel, where scrolling through the pages is accompanied by a JavaScript animation effect.
-
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.
-
See how thumbnails in a grid of thumbnails can be revealed in a choreographed manner, with a JavaScript animation effect for revealing each thumbnail.
-
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.
-
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.
-
See an example of a JavaScript slideshow widget with stunning image wipe animation effects that you didn't believe were possible with just JavaScript.
-
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.
-
See stunning image wipe animation effects you didn't believe possible with JavaScript. Choose from dozens of presets. Tweak values to make your own.
-
See some amazing possibilities for image transitions using lightweight JavaScript animation. Play with lots of effect presets, and even make your own.
-
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.
-
See how the zooming collection item widget is used in combination with an image selector strip to provide an interface for previewing multiple images.
-
Experience the zooming collection item widget. It gives you a lightweight and intuitive preview behavior, with a JavaScript animation zoom-in effect.