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

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


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

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! :)

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

50 comments

Guillermo
Wed, 29th July 2009
Thanks for the link to http://bloghelpr.us ! Reply
kevin Admin
Wed, 29th July 2009
@Alfredo: yes, thanks for that website, I added it :) Reply
arnaud-k
Wed, 29th July 2009
Thanks for the link to http://arnaud-k.fr ! I'm proud to be in this list ! Reply
Free JavaScript Code
Wed, 29th July 2009
very cool & good tip, thank you very much for sharing. Reply
Alfredo Artiles
Wed, 29th July 2009
i am missing this one ;) http://montealto.es Reply
luciano
Thu, 30th July 2009
Thanks for including my FXQueues plugin for jQuery! :) Reply
Bornis Network
Thu, 30th July 2009
Hi, Great post.
We Have a Flash-Like Javascript Animation too. http://BornisNetwork.com Reply
Web Design Mumbai
Thu, 30th July 2009
these are absolutely mind-blowing websites

great inspiration! Reply
prap
Sun, 2nd August 2009
Cool!! Reply
Dzinepress
Mon, 3rd August 2009
i really like and learning fro your post. thanks Reply
Angel
Wed, 5th August 2009
Great list of animation examples. My favourites are jParallax plugin and the last one from arnaud-k. Reply
João Alvarenga
Wed, 5th August 2009
Great list. I wish I could do the PHP Cli effect. It's amazing. Reply
Logistetica
Wed, 5th August 2009
WOW!!! Our project is #1 on your list! Thanks a lot! Reply
kkool
Thu, 6th August 2009
thank Reply
rhyhann
Fri, 7th August 2009
In fact, the element shown in the PHP CLI framework is doable inany website you want: http://mattkirman.com/2009/05/20/jquery-plugin-rfsparks/ . Long life to open-source ! Reply
Satoshi Nakajima
Mon, 17th August 2009
I would like to share my animation framework, ianime.js (http://code.google.com/p/ianimejs/). Here is an example:

http://code.google.com/p/ianimejs/).

Reply
Pece
Mon, 24th August 2009
Cool Js animations. I found this article while looking for a cool JS alternative of the "Firefly" Flash animation (http://riznica.com.mk ) Reply
Ivan
Thu, 17th September 2009
Muy interesantes los efectos, muchas gracias Reply
Fawad
Wed, 10th March 2010
Awesome Reply
Best Selling Netbooks
Tue, 23rd March 2010
In fact, the element shown in the PHP CLI framework is doable inany website you want: http://mattkirman.com/2009/05/20/jquery-plugin-rfsparks/ . Long life to open-source ! Reply
ฟังเพลง
Sun, 18th April 2010
In fact, the element shown in the PHP CLI framework is doable inany website you want: http://mattkirman.com/2009/05/20/jquery-plugin-rfsparks/ . Long life to open-source ! Reply
cms web development
Wed, 26th May 2010
Excellent tutorials. Just wanted to say thanks for taking the time to write it! Reply
wILLY
Sun, 30th May 2010
i can't speak.....all of yours ...beautifulll Reply
hairstyles
Wed, 30th June 2010
Great blog, and thanks for the insight.
Reply
hairstyles
Wed, 30th June 2010
Thank your for your articles. I learn more from here! Thank you !
Reply
Devin Walker
Fri, 27th August 2010
Awesome post, I love seeing the limits pushed with jQuery. Flash will have it's place still, but not for complete websites. Cmon! Reply
ashish
Mon, 13th September 2010
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
时尚淘吧
Sat, 18th September 2010
In fact, the element shown in the PHP CLI framework is doable inany website you want: Reply
tisoy
Thu, 10th January 2013
tae wla silbi

Reply
newnep
Thu, 23rd September 2010
Great material man!! really helpful.... keep it up Reply
PHP Zend Website Development
Thu, 23rd September 2010
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
Thu, 23rd September 2010
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
Mon, 13th December 2010
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
Mon, 25th April 2011
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
Sun, 30th October 2011
Comprehensive list! If you want more of the above check out my small CSS animation library: http://ainalem.com/jellybean.html Reply
Aaron
Tue, 20th December 2011
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
Tue, 20th December 2011
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
Sun, 1st January 2012

very nice. It will be useful for my next project Reply
fil
Sat, 21st January 2012
I found out about this amazing site: http://www.fight4fun.it/ Reply
Damn
Wed, 15th February 2012
all exemples sucks ! Plugin Rocks Reply
zamaan
Sun, 1st April 2012
very nice collection. i am going to say good bye to flash... Reply
brian
Mon, 30th April 2012
cool stuff but i dont know if im ready to give up my flash yet. but i am becoming a believer.
as soon as i can reproduce my site http://www.pyelive.com and it look just as goo i will make the switch for good - but thanks for the examples! cool Reply
john dean
Wed, 11th July 2012
great article,,, awesome Reply
luc
Thu, 26th July 2012
I'd like to creat some animated texte & images in my web site, can some body show me how??
Thanks Reply
Mohit
Tue, 28th August 2012
Really Inspiring. Thank You.
Here's what I made using JavaScript. http://www.concetto.co.in/ Reply
Jens Ahrengot Boddum
Sun, 30th September 2012
There's a new player in town ...

Greensock is a fantastic javascript animation framework that performs above and beyond everything else currently available. If you're interested, check out my tutorial: <a href="" title="A tutorial on using the Greensock JavaScript animation framework" target="_blank">Greensock JavaScript Animation</a>. Reply
Jens Ahrengot Boddum
Sun, 30th September 2012
Whoops broken link. Sorry about that. Here you go:
http://ahrengot.com/tutorials/greensock-javascript-animation/ Reply
Curtis Socha
Mon, 10th December 2012
Check out the animations on www.jcsml.com. Full support for all browsers (yes, even fully support for IE6), and tons of animations and code examples. Fully specs available even for animated typeography. Reply
geonz
Sat, 13th April 2013
Dang, wish some of the links actually worked. Reply
dsa
Tue, 6th May 2014
http://wideo.co is an excellent free tool to create animation videos. You can upload your videos to youtube
Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement