Introducing the SimpleAnimation library

Over the past couple of weeks I’ve been working on a Javascript library that uses similar syntax to the TweenLite library. Being a Flash Dev, I figured it may help me and other developers to transition to the world of Javascript animations. I’ve come across many little caveats in JS that aren’t in Actionscript and have been working to address them all in the library to make it “Just work”.

A note on the demos: they will work in all modern browsers (Chrome, FF7+, Safari, IE9+). I’m working on making it compatible with IE7+, specifically the alpha filter.

You can download the library and examples at https://github.com/ntibbles/SimpleAnimation

Here’s the first, just using SimpleSynchro. It’s adapted from Lee Brimelow’s “GotoAndLearn” blog on Flash’s 3D carousel.
3D Carousel
You can see in in action at: http://noel.tibbles.ca/demos/examples/05.demo.3d.carousel.html

In this demo you can control “live” some of the variables. It’s a very simple script that rotates all the image on stage based on mouse movement. Play around with it, view the page source and download it from GitHub if you like it.

The next demo is using SimpleTween. This particular demo won’t work in FF yet, due to the tweening of individual background x and y properties. This demo tween’s each tile, chooses a random tile and then expands the tile and moves the background.

Animated tiles

You can see it in action at: http://noel.tibbles.ca/demos/examples/06.demo.tiles.html

Again, you can view the source to see how it works.

I’m planning some tutorials on using the Library in the very near future. Hope you’re interested in this and I’m looking for people to contribute.

This entry was posted in JS projects, Javascript. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>