The UIZE JavaScript Framework includes scores of excellent examples to get you started. This index lists 31 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.
-
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 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. -
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. -
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 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. -
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. -
Image Cycle
Create a simple JavaScript slideshow experience with the cycling image swap widget. Each image is revealed with a different swap / transition effect. -
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. -
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. -
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. -
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 presets. 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 presets, 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.