October 11, 2024

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

html5 demos

CanvasMol

html5 demos

Flickr and Canvas in 3D

html5 demos

Cloth Simulation

html5 demos

etchaPhysics

html5 demos

Google Images Gift Box – CSS 3D example

html5 demos

Liquid Particles

html5 demos

HTML5 Canvas Nebula

html5 demos

Ball Pool

html5 demos

Bomomo

html5 demos

Share

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

79 Comments

      1. Tomas Reply

        Flash 10 works great on Android and other tablets, if Flash is so bad why not disable it default and let users turn it on if they want. Just because Steve dislike Flash the rest of the world don’t.

    1. popo Reply

      Exactly.. and by the way, that demo would run extremely smoothly with the CPU power of the iPad, but Jobs is protecting his precious AppStore business model and won’t allow Flash.

      HTML5 is cute. I’ve seen some nice effects that remind me of Shockwave in 1995. But to suggest that it even comes close to Flash is just hilariously ignorant.

      ..as is the notion that the iPad can’t handle Flash.

      The lack of Flash on the iPhone is a business decision, period. And what’s funny is the legions of iPhone fanboyz who defend this decision as if it’s based on tech reasons.

      Fail.

      Flash owns. As does Android.

    2. Christine Reply

      Dude, we know that Flash is ahead of HTML5 right now. The point of these demos are that HTML5 is advancing and could one day take over even that Flash example of yours.

      1. DaveCS Reply

        No, HTML5 will not take over Flash or Silverlight. HTML 5 will make things look nice but I dare anyone to try and make it actually do anything that really matters.

        Flash and Silverlight can access and digest very complex SOAP services. Silverlight is ahead of the game in terms of data with it’s WCF Service capabilities.

        Text parsed by a browser (HTML 5) will never be able to reach that level of client/server client/cloud robustness.

  1. Simon Gregory Reply

    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

  2. Ronald Calbick Reply

    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.

    1. Eddie Reply

      @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.

  3. GenoBaby Reply

    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.

  4. Sean Rice Reply

    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.

  5. ztgst Reply

    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.

  6. Sander Reply

    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. https://www.flashlab.com

  7. Jason Marziani Reply

    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!

  8. Mark Haliday Reply

    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

    1. Christine Reply

      Im not sure where Flash was at in 2001, but like Flash, HTML5 is growing and advancing and not for no reason. Someone sees it going somewhere and trust me, they will make their vision come true.

  9. andy Reply

    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.

  10. Tim Reply

    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.

  11. makevoid Reply

    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 : /

  12. makevoid Reply

    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…

    1. Tim Reply

      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.

  13. Warren Jerzyszek Reply

    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.

  14. James Reply

    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.

    1. Christine Reply

      HTML5 pretty much IS just that man. The new implementation of HTML and Javascript is called HTML5. Like, yay we have designed a way to bring these 2 codes together to create a wonderful experience.

    1. joe Reply

      yes, but the demo from chrome experiments shows that the exact video is broken into larger pieces than the site u provided.

  15. Matt Reply

    “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!

    1. Barney Blalock Reply

      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.

  16. Andrew Reply

    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.

  17. Al Lemieux Reply

    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.

    1. Tomas Reply

      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.

  18. Jock Reply

    Fer gawd’s sake, HTML 5 is still in its infancy. What the Flash naysayers don’t seem to get is it isn’t even complete and it’s already showing promise.

    There were many who said Java would never be viable for creating applications, let alone games. And yet with improvements in its speed, it’s a major contender.

    Will HTML 5 kill Flash today? No. Does it show such promise. A guarded yes.

    @Attila F: Open Standards Video and Audio is already around (Ogg Theora and Ogg Vorbis). Eventually, it will.

    The point that seems to be missed here is that no proprietary plug-ins were needed in the demos. Flash (originally Splash) was created to replace primitive animated GIFs (lighter weight and better animation). It expanded into other things. It’s not going anywhere anytime soon. I think eventually it will fall by the wayside as open standard based tech takes over.

  19. Awais Reply

    The only main advantage I see of using HTML 5 over Flash is it could be run on Apple IPhone/IPad while Flash donot, but most of the other IPhones like that of google support Flash, so this advantage is not that much bigger that I could take Flash market to HTML5.
    Secondly HTML5 animations have three major drawbacks compared with Flash
    1- It does’nt have code security.
    2- Too much complex code that’s not easy to develop.
    3- Browser compatibility issues (will take years to optimize them)
    Also if we check the Flex based applications then HTML5 will be left way behind and then

    we have “Adobe” attached with Flash that is constantly upgrading Flash, making it more faster, safer, reliable, adding different and unique innovations, no doubt HTML5 is running behind but why using spending so much time in writing so much code thats not secure, when we have huge number of components of Flash are available.

    Also we cant have keyframe animation in HTML5 etc.

  20. Ap-o Reply

    html5, yeah sure….

    You html maniacs eventually made it to build websites that feature (almost) the same tricks and animation as flash developers did 5 years ago!

    Well done, see you in the future…