10 HTML5 Demos to Make You Forget About Flash
You’ve probably been hearing a lot lately about how Flash is a dying technology and how it’ll soon be replaced by HTML5. Personally, I think that it will slowly replace Flash for some things, but Flash will always have a place, especially for developing complex games and rich internet applications. If you’ve yet to see what HTML5 can do, I’ve rounded up 10 demos that show off some of its capabilities.
So what do you think – will HTML5 replace Flash?
Canvas Minimal Particle Animation
CanvasMol
Flickr and Canvas in 3D
Cloth Simulation
etchaPhysics
Google Images Gift Box – CSS 3D example
Liquid Particles
HTML5 Canvas Nebula
Ball Pool
Bomomo
Related Posts
Here's some other articles that you will definitely find useful.
55 Excellent Examples of Websites Using HTML5
7 Useful Resources to Help You Learn HTML5
13 Pure CSS Techniques for Creating JavaScript-like Interactions
15 Useful HTML5 Tutorials and Cheat Sheets
12 Excellent CSS3 Button and Menu Techniques
Jun 24, 2010
This is 20.000 particules running in Flash: http://wonderfl.net/c/rbeg/ – your 1500-low-framerate-demo is cute, as well as the other demos. And I would have seriously consider that in 2001. Thanks for sharing!
Jun 24, 2010
The canvas tag still has a long way to go before it will supersede flash!
Jun 24, 2010
very impressive stuff, although its not fair to state it as forgetting about flash, one major major factor about html5 you cant do keyframe animation, flash will always have a roll in the web and will work well in collaboration with html 5, but like me there are a lot of people out there that simply are not coders, and i also require a keyframe animation solution
Jun 24, 2010
I would have to agree with Jordan. While the websites listed in the article are impressive examples of what can be done with HTML5, the sheer complexity and length of the code involved will prevent the vast majority of developers from ever using it for these purposes – it’s easier to build complex animations using Flash. Perhaps there will eventually be some tools to simplify the process, but I see Flash sticking around for quite some time.
Jun 24, 2010
good luck getting html5 to be cross browser compatible before 2012
Jul 18, 2010
@level09
“good luck getting html5 to be cross browser compatible before 2012″
Modern browsers will not be an issue in the next 1-3 years. Chrome seems to be on the right track with Safari and Firefox 3.6 running close behind. IE 9 will be out probably next year? and should show some greating support. IE 10 will fully support it by then.
So if even in a few short years that all modern browsers will support HTML5 and CSS3, it going to take a lot longer to get the average users to catch up for a variety of reasons because they are still using old browsers. I mean, we still have about 5-7% of users still using IE6 and thats been around how long now?? I even had one user tell me about Netscape that he’s still using.
Jun 24, 2010
oops.. should’ve said 2020
Jun 24, 2010
Wow. Cool stuff. It is just like Flash 2.0. No one knows what it is. No one knows how to do it. No one knows what to do with it.
Jun 24, 2010
i’m a flasher but i’ve to admit html 5 is cool and promissing
Jun 24, 2010
I’ve experimented porting a lot of the cool AS3 things that I’ve done in the past to the canvas and it worked but unfortunately I didn’t like that some of my examples ran at a slower frame rate or the behavior was different in different browsers. I’m also not cool with the fact that my source code is available for everyone to see. There are certain things I just can’t let out there because it vital to me paying my mortgage. These demos are extremely cool but trust me… it didn’t make me forget about flash.
Jun 24, 2010
I think that the canvas element will start to replace flash for many uses as soon as there is a good GUI-based tool (like flash) to create the animations and interactions. Lets face it, nobody wants to do character animation, for example, using javascript. Can you imagine having to code all the different positions for the design elements manually? Forget that!
Though HTML5 canvas for video, games, and a lot of other things is probably quite feasible. I just want a GUI tool for creating HTML5 canvas (vector!!!) content just like Flash has.
Jun 24, 2010
Cute stuff but html5 is a very long way of replacing flash (or silverlight or java for that matter).
Flash can do the same stuff and a million more than the ones shown here easier, better, faster, far more compatible and with less CPU on top of that.
It’s nice to post a showcase of html5 demos but these “…forget about flash” crap must one day stop. It’s not trendy any more, it’s just plain old bs.
Jun 24, 2010
These html5 demo’s are really not so impressive at all. Especially if you consider the fact that they simply will not work in the most popular browsers (like IE7/8), flash will.
Here’s some demo’s that make you forget about this HTML 5 hype. http://www.flashlab.com
Jun 24, 2010
This article will make me forget about Flash for the exact amount of time it’s going to take to drop this site from my RSS reader.
Congrats on your success, WDL!
Jun 24, 2010
The real issue isn’t that the HTML 5 Canvas isn’t capable of a lot of things that Flash can do, but the fact it typically takes a huge amount of JavaScript to do so whereas in Flash typically you don’t need to code as much and in many cases you can just use movieclips and the timeline to your advantage.
I agree with some of the other comments that if someone built an IDE capable of making complex animations as simple as using Flash, then I’d be more agreeable to the HTML 5 Canvas getting some traction later on.
You still have to account for people though that shutoff JavaScript though. I know people that turn off JavaScript in their browsers because of the trouble it can cause.
-Mark
Jun 24, 2010
canvas will be a very serious competitor, like Chuck Norris can do a wheelie on a unicycle. go css web 3d!
Jun 24, 2010
really, really unimpressed. sorry. as someone else said – would have been impressive in 2001?
Jun 25, 2010
Haha Jae, funny picture of Chuck on an unicycle!
Not impressed though…
Jun 25, 2010
These would have been impressive if they were presented in the context of how nicely canvas is coming along. But by trying to jump on the “will it kill Flash?” meme, all you’re doing is shining a light on the fact that all of these demos could have been done in Flash years ago, and worked in all major browsers. Just focus on the good things about HTML5 and stop trying to flog the bogus “two technologies enter..” meme.
Jun 25, 2010
Demo is great!
Jun 25, 2010
Woww HTML5 is the future! Thanks!!
Jun 26, 2010
Flash, is around for years deployed on millions op computers, yes.
Html5 is not finished (spec is being written), all the major browser vendors are implementing it, it is open-source, it gives 3d parties the opportunity to develop better and faster software (as opposed to development of the flash plugin which belongs to adobe only), html5 will be the no 1. platform for inter-media implementation (mobile devices, laptops, interactive tv).
The big problems with Flash in my opinion are : it is not open-source, it is a plugin, (poor support for linux64), expensive development tools
Html5 solves all these things.
Jun 26, 2010
It seems that almost no one is caring about webkit specific hardware accelerated optimizations like webkit transitions and tansforms. All these demos are running very slowly on ipad/iphone : /
Jun 27, 2010
Here is another CSS3 3D example.
Click and drag
http://bin.bmson.com/dg/
Jun 27, 2010
I personally like HTML5 more than flash. So I love this article thnx for the inspirational demos.
Jun 27, 2010
It’s a pity that none of these demos are working well on iphone/ipad, they aren’t using webkit transitions/transforms (to use hardware accelerated rendering) and so they run very slowly on these devices… Also on standard machines (especially netbooks) equipped with webkit-based browser (chrome, safari) can’t benefit of hw accelleration…
Jun 28, 2010
Well Flash doesn’t run at all on iPad / iPhone sot that’s a 100% better!
The time will come.. html5 will be the no dev application-platform for all media. Remember the web-os, the ubiquitous browser etc.
They can all make use of this one open-standard solution. I think by now every computer/software manufacturer sees the benefits of open-source development. Just look at how many phone-os’s, portable pc’s are linux based, google with their os solutions etc.
Jun 28, 2010
I’m yet to really look into what HTML 5 can do but this list looks really promising for the future of web design. I appreciate that it is maybe to early to predict the future of flash.
It’s important to move with the development of technology and although there will always be a place for flash, with Apple not supporting it and Apple quickly becoming pioneers in design technology I think we will notice it less and less on the web over the next few years.
Jun 28, 2010
Really bloated code. I am not impressed at all.
Jun 28, 2010
Shouldn’t this be called HTML 5 + Javascript demos. HTML5 might be able to create those nifty looking images, but javascripts doing all the work.
HTML5 and javascript still are inferior to Flash when it comes to creating both complex animations and large RIA architectures in my opnion.
Then again it’s nice to have apps like this that run directly through the browser. It’s a give and take kind of thing.
Jun 29, 2010
Can “HTML5″ do this? http://www.unfocus.com/2010/06/29/the-bunny-video-eplodes-explodes/
;-P (Kudos if it can!)
Jun 30, 2010
This guy has hundreds if not thousands and most blow these away…
http://www.dhteumeuleu.com/
Jul 3, 2010
“Not everyoone has Javascript enabled”, “It still runs slow”, “Can it blow up every pixel?”, etc.
Flash runs slow and takes long to load before you can see anything, and more people have Flash disabled than Javascript. At least, Canvas will degrade – you just won’t see the animations. It won’t replace Flash, but just like Javascript frameworks have done, it will make us less dependent on one technology for simple web applications. Can’t wait thanks for the post!
Jul 26, 2010
I have used Flash to make images and menus load faster and have smaller file sizes than any comparable format. The loading and file size is all in the way the swf is made. It is a shame that all the obnoxious adverts and splash pages have almost ruined a great tool.
Jul 11, 2010
HTML5 looks neat! I’d kill to change http://www.mytubedesign.com to HTML 5
Jul 26, 2010
Man, talk about link bait. This issue is old. These are OK examples, however Flash does them with much more finesse and a lot less development time, among other things.
Ironic that an article about things that make you forget about flash is filled with examples of people trying to replicate flash.
Stupid.
Aug 12, 2010
Just LOVE liquid particles!!! Wish I knew how to do stuff like that.
Aug 14, 2010
Look at the source code on the Ball example. It’s all JavaScript. Is it supposed to be HTML? If HTML is the answer to all of your animation needs doesn’t that cross a certain line where the tool is no longer about displaying web content, but doing other things poorly? I’ll stick with Flash.
Aug 17, 2010
I am a flash developer but i do admit that HTML 5 gonna replace it very soon
Aug 25, 2010
Yeah good luck with cross-browser performance, animation, filters and effects, audio handling, 3D etc etc. HTML5 & Co are going to work good on static classic web pages but Flash is light years ahead in creating new experiences.