Javascript

16 Impressive Flash-Like Javascript Animation Inspirations, Tutorials and Plugins

Written by Kevin Liew on 30 Jul 2009
411,687 Views • Shares
50 comments

Introduction

A while ago, create animation with javascript is just too difficult. Since the introduction of javascript frameworks like prototype, jQuery and mootools, a lot other frameworks that designed to enhance the animation abilities have emerged. Now, we can use create impressive javascript animation easily and your visitors just wouldn't able to tell the differences.

I hope you will get something new from this post. Enjoy!

Advertisement

Examples and inspirations

Plugins and Tutorials

  • jParallax Plugin | Demo

    jParallax turns a selected element into a 'window', or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.
  • FxQueues Plugin | Demo

    The new version of this plugin is based on a script John Resig started some time ago (I came across his code afterlaunching the first version of this plugin). I adapted the code and added the scope stuff, created a new example page and also created some unit tests (which need some improvement, but are a good start).
  • jsAnim - Free Javascript Animation Library | Demo

    jsAnim is a powerful, yet easy to use library for adding impressive animations to websites, without sacrificing standards or accessibility. Weighing in at just under 25 kilobytes, jsAnim packs a lot of punch for such a little application.
  • $fx | Demo

    A compact, lightweight Javascript Library for animation. CSS properties (and more!) adjustment along a time line. Parallel effect sets and effect chains. Extended set of callbacks to adjust behavior. Parallax Scrolling and Less than 4kb!
  • GX | Demo

    GX is a full-featured, cross-browser, super-tiny (10kb uncompressed) Javascript Animations Framework. Using GX you can create complex animations working with every w3c CSS property.
  • Glimmer | Demo

    jQuery's support for animations is amazing. Glimmer makes it easy to create standards-based, custom animations that can work directly with your existing HTML and CSS!
  • Magic | Demo
  • Simulate Gravity with jQuery | Demo

    Visual effects on web pages are becoming more and more effective thanks to framework like jQuery. The idea of being able to adjust the look of a page with a click or a button gives the user a bit of extra interaction. This tutorials aims to give you insight of realistic gravity animations with jQuery.
  • Building an Animated Cartoon Tobot | Demo

    Aside from being a fun exercise, what purpose does something like this have? None that’s plainly obvious. Its about as useful as a miniature ship in a bottle. Yet it does have an underlying purpose. It could inspire someone to look beyond the perceived constraints of web designers and developers.
  • Flashy Intro with jQuery Animation | Demo

    Remember those days which almost every website has a Flash intro or header that makes you wait un… forever. Now more and more people are using jQuery’s animation function to make their sites interesting. Let’s see how we do it.
  • How to Make an Impressive Animated Landscape Header with jQuery | Demo

    In this tutorial we’ll start with a cartoon themed header, build two different states for content and animate a transition between them using jQuery.

 

Don't forget to share this article to show your support! :)

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

50 comments
ashish 9 years ago
my website is still underconstruction.. but i have tried this this jquery plugin...its cool... and i have managed to create a cool effect...
visit it. its http://www.newnep.com
Reply
时尚淘吧 9 years ago
In fact, the element shown in the PHP CLI framework is doable inany website you want:
Reply
tisoy 7 years ago
tae wla silbi

Reply
newnep 9 years ago
Great material man!! really helpful.... keep it up
Reply
PHP Zend Website Development 9 years ago
I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post....
Reply
Miami Web Design 9 years ago
That's a really innovative and coo looking window they designed to show off! It's amazing at what you can come up with when you partner with another powerhouse company. I bet it helped keep the sales up even though the economy isn't back in full-swing yet.
Reply
turbonacho.com 9 years ago
This great blog is very interesting and enjoyable to read. I am a big fan of the subjects discussed. I also enjoy reading the comments, but notice that alot of people should stay on topic to try and add value to the original blog post. I would also encourage everyone to bookmark this page to your favourite service to help spread the word.
Reply
Jack Mill 8 years ago
Nice. Thank you for this post. But I think Toondra animation studio works looks better. It's only my opinion of cause. Check dit out: http://www.toondra.ru/en/animation.htm
Reply
Aina 8 years ago
Comprehensive list! If you want more of the above check out my small CSS animation library: http://ainalem.com/jellybean.html
Reply
Aaron 8 years ago
It's worth checking out this library - light, fast, powerful. Written for game development.
http://www.as-int.com/asanim/
It's only 3K!!
Reply
BBeach 8 years ago
Wrote a JS animation that switches between stories for a newspaper article series. The source is not minified so feel free to poke around. http://tdn.com/24hrs/article_19dc0e36-88a1-11e0-9986-001cc4c03286.html
Reply
Eda Can 8 years ago

very nice. It will be useful for my next project
Reply
fil 8 years ago
I found out about this amazing site: http://www.fight4fun.it/
Reply
Damn 8 years ago
all exemples sucks ! Plugin Rocks
Reply