10 HTML5 Demos to Make You Forget About Flash

By / Jun 24, 2010 / Inspiration
shares

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

About the Author

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

78 Comments

  1. stef
    June 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!

    Reply
    • JD
      January 13, 2011

      Just checked out your demo on my iPad, looks great!

      Reply
      • Tomas
        January 14, 2011

        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.

        Reply
    • popo
      February 19, 2011

      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.

      Reply
    • Christine
      June 24, 2011

      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.

      Reply
      • DaveCS
        August 17, 2011

        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.

        Reply
  2. Jordan Walker
    June 24, 2010

    The canvas tag still has a long way to go before it will supersede flash!

    Reply
    • JThompson
      May 23, 2011

      Finally someone who can spell.

      Reply
  3. Simon Gregory
    June 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

    Reply
  4. Ronald Calbick
    June 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.

    Reply
  5. level09
    June 24, 2010

    good luck getting html5 to be cross browser compatible before 2012

    Reply
    • Eddie
      July 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.

      Reply
  6. level09
    June 24, 2010

    oops.. should’ve said 2020

    Reply
  7. Homer
    June 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.

    Reply
  8. hellrider
    June 24, 2010

    i’m a flasher but i’ve to admit html 5 is cool and promissing

    Reply
  9. GenoBaby
    June 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.

    Reply
  10. Sean Rice
    June 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.

    Reply
  11. ztgst
    June 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.

    Reply
  12. Sander
    June 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

    Reply
  13. Jason Marziani
    June 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!

    Reply
  14. Mark Haliday
    June 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

    Reply
  15. Jae Xavier
    June 24, 2010

    canvas will be a very serious competitor, like Chuck Norris can do a wheelie on a unicycle. go css web 3d!

    Reply
  16. Mike
    June 24, 2010

    really, really unimpressed. sorry. as someone else said – would have been impressive in 2001?

    Reply
    • Christine
      June 24, 2011

      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.

      Reply
  17. Web Design
    June 25, 2010

    Haha Jae, funny picture of Chuck on an unicycle! :D
    Not impressed though…

    Reply
  18. andy
    June 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.

    Reply
  19. Royal Bengal Web
    June 25, 2010

    Demo is great!

    Reply
  20. Comprar online
    June 25, 2010

    Woww HTML5 is the future! Thanks!!

    Reply
  21. Tim
    June 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.

    Reply
  22. makevoid
    June 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 : /

    Reply
  23. Baldvin
    June 27, 2010

    Here is another CSS3 3D example.
    Click and drag

    http://bin.bmson.com/dg/

    Reply
  24. Tanya
    June 27, 2010

    I personally like HTML5 more than flash. So I love this article thnx for the inspirational demos.

    Reply
    • karan
      September 13, 2011

      Few examples are jquery not an HTML5

      Reply
  25. makevoid
    June 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…

    Reply
    • Tim
      June 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.

      Reply
  26. Warren Jerzyszek
    June 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.

    Reply
  27. claus
    June 28, 2010

    Really bloated code. I am not impressed at all.

    Reply
  28. James
    June 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.

    Reply
    • Christine
      June 24, 2011

      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.

      Reply
  29. Kevin Newman
    June 29, 2010

    Can “HTML5″ do this? http://www.unfocus.com/2010/06/29/the-bunny-video-eplodes-explodes/

    ;-P (Kudos if it can!)

    Reply
    • joe
      March 4, 2011

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

      Reply
  30. Stephen
    June 30, 2010

    This guy has hundreds if not thousands and most blow these away…

    http://www.dhteumeuleu.com/

    Reply
  31. Matt
    July 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!

    Reply
    • Barney Blalock
      July 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.

      Reply
  32. MyTubeDesign
    July 11, 2010

    HTML5 looks neat! I’d kill to change http://www.mytubedesign.com to HTML 5

    Reply
  33. Andrew
    July 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.

    Reply
  34. Veronique Palmer
    August 12, 2010

    Just LOVE liquid particles!!! Wish I knew how to do stuff like that.

    Reply
  35. Al Lemieux
    August 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.

    Reply
  36. website design montreal
    August 17, 2010

    I am a flash developer but i do admit that HTML 5 gonna replace it very soon

    Reply
    • Tomas
      August 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.

      Reply
  37. Attila F
    September 5, 2010

    Try to record web cam using html5 or stream a live TV channel ;)

    Reply
  38. Jock
    September 8, 2010

    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.

    Reply
    • Christine
      June 24, 2011

      THANK YOU @Jock

      Reply
  39. Awais
    October 13, 2010

    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.

    Reply
  40. Mohamed
    December 18, 2010

    I cant believe this!!!!!! really html 5 can do that!!! OMG!! :(

    Reply
  41. Ap-o
    January 18, 2011

    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…

    Reply
    • Christine
      June 24, 2011

      As we’ll be seeing Flash in the past.

      Reply
  42. John
    March 21, 2011

    flash is junk – always was and always will be – well … lazy people still use it but their websites are small and useless. Move up to big boy pants @stef

    Reply
  43. Markus
    June 16, 2011

    The last one, bomomo, is Flash.

    Reply
  44. Mike
    June 24, 2011

    Good to see. Flash is complete crap.

    Reply
  45. Ben
    June 24, 2011

    Absolutely awesome article, great examples, looking forward to some of these older less capable browsers dropping off so we can start using HTML5 completely!

    Reply
  46. Colorblind Programming
    June 24, 2011

    Ironic – the banner on the bottom of the page says ‘Create free stunning flash websites’ :D

    Reply
  47. jwopitz
    August 26, 2011

    I think a better example of showing why a flash developer/client might consider choosing to learn/use HTML over flash is something like a complete migrate of a RIA from Flash to HTML5. Grooveshark for example.

    I’d really be interested in seeing some examples of GUI libraries that will compete with the Flex mx and spark component sets.

    These examples are nice to demonstrate the abilities of HTML5 but in no way make me want to jump ship anytime soon.

    Reply
  48. w3-logics
    August 31, 2011

    First of all, I would like to congratulate you for this article. It’s surely very useful to understand how much one can control image manipulation on client side using canvas support. a word of caution: one should take into consideration not just the pages performance but also maintainability and scalabilty aspects and weigh out where to use what

    Reply
  49. carwingmirrors
    August 31, 2011

    Fantastic article! I had no idea so much could be accomplished with the HTML5 Canvas.

    Reply
  50. Jamie
    September 19, 2011

    HTML5 on it’s own doesn’t do this, it’s CSS and javascript that do the animation and stylizing. HTML5 is great and all, but it’s best not to get the technologies confused. :) FYI, AJAX doesn’t do animations either – it’s javascript.

    Reply
  51. Ashley Sheridan
    September 27, 2011

    The HTML5/CSS3/Javascript stack is never going to replace Flash, and anyone who is saying it will/can is clearly stuck in a bit of a dream world or really doesn’t understand the technologies involved.

    That said, it can make a good alternative to Flash in some cases, and can be used to gracefully enhance without causing too many issues. You don’t need to worry about Flash blockers, search engines can see your content (good luck with that in Flash unless you’re prepared to put in a stupid amount of work) and it can be made accessible very easily (a lot of people with a disability find Flash sites a pain and often impossible to navigate)

    The other aspect of it is the open nature of the HTML5 stack, as opposed to the very closed Flash. The only barrier to entry with HTML5 is in learning to code (which is slightly alleviated with Adobe Edge), and you don’t have to pay for specialist software (a text editor will do)

    Reply
    • Roy M J
      January 21, 2012

      “The HTML5/CSS3/Javascript stack is never going to replace Flash, and anyone who is saying it will/can is clearly stuck in a bit of a dream world or really doesn’t understand the technologies involved.”-

      Its nearly 4 months after you have first posted this as reply.. You still believe html5 hasnt killed flash??

      Check these articles and you’ll know for sure..

      http://www.zdnet.com/blog/networking/flash-is-dead-long-live-html5/1633
      http://forwardthinking.pcmag.com/none/290436-why-adobe-is-deflating-flash-html5

      There are so much features and articles to underline the fact that flash is dead or that process of replacing flash with html5 is currently undergoing..

      Cheers..

      Reply
      • Lawrence
        June 21, 2012

        Hiya,

        Flash can’t be replaced by HTML5. The only thing HTML5 will replace is all the websites who used Flash incorrectly as well as the websites that could only use Flash in order to embed video.

        There is nothing wrong with Flash; only the idiots that make buggy ActionScript or ugly animations and give Flash a bad name.

        HTML5 will not replace a cross-platform runtime environment because it isn’t a runtime environment; it’s a way of describing data to be interpreted by web browsers. I hate to say it but, Roy, you need to understand in greater depth the role of Flash and the underpinnings of both.

        Lawrence

        Reply
        • Moi
          August 4, 2012

          About as much as Python/PHP were replaced by Perl…

          Reply
  52. Sean Voss
    September 29, 2011

    Wow… it’s amazing to see how fluid these render though, usually in the past HTML5/Canvas demos ran at a framerate that looked terrible while the FlashVM once loaded would be nice n smooth. These demos are crisp and clean.

    Reply
  53. Thomas
    October 17, 2011

    I suggest you got o http://www.away3d.com/showcase/ and look at the showcases there for Away3D todays leading 3D engine for Flash developers. Some demos are for Flashplayer 11 (The Molehill Project) and some are not.

    So what Sean says: clearly you have no grasp of Flash if you think it would somehow “replace it”. Companies build full scale advanced 3D games in Flash already and there is around 40 API’s for Flash, there is a ton of coding frameworks all relying on established standards wether Pure MVC, Parsley or Robotlegs.

    Clearly, HTML 5 is not at all about that, and to imply so means you are mixing up two totally different forms of languages. One still being a tag language however dynamic. Usually the end result is that people start comparing rendering speeds. Which doesnt really say anything as that is like comparing an ant to a bazooka.

    As for rendering I suggest you check the Blitmask project on http://www.greensock.com. Makes HTML5 look like a turtle.

    Theres no interest in the question technology vs technology as it’s artificial. You are not comparing two rivals. HTML5 is great in its own and not meant as an adversary to Flash. There’s no logical base for such a comparison as it just raises artificial emo like views.

    Its like comparing eating elephant to haddock and someone goes huh what ?

    Reply
  54. Martin
    October 18, 2011

    Flash vs HTML5 is an issue. Many things that CANNOT be made with HTML4 and therefore required Flash, can be made with HTML5-SVG-CSS3-Javascript. And will be.

    Performance is not the most important thing:
    If you have the choice between requireing your users to have an up-to-date version of a proprietary plugin that lacks support for some major platforms and using out-of-the-box open-source browsers across a variety of platforms for the same task… the decision is pretty clear, no?

    Flash has it’s niche, that HTML5[...] will not enter, and that is games etc, but HTML5 will definitly occupy sectors where Flash had been dominant.

    Reply
  55. Gordy
    October 24, 2011

    Here’s a really cool gallery:
    http://www.hippostudios.co.uk/?S=Animator&P=AnimatorGallery

    Reply
  56. Pablo Neirotti
    December 5, 2011

    I made a multimedia player on HTML 5. Still in the dark, but quite functional already. I would like to hear (read) some feedback if possible =)

    Senses: http://senses.artpulse.me/

    More info: http://artpulse.me/articles/Senses/

    Reply
  57. Robert
    May 10, 2012

    Lol I guess a lot of flash programmers are still in denial.
    Adobe already stopped developing flash for mobile platforms.
    Apple Ios doesn’t support flash.
    When you check out the statistics on the W3C schools website you’ll find the usage of mobile platforms (esp Ios) is rising fast.
    In short, the question shouldnt be if HTML5 will replace flash/actionscript, the question is when will it.

    I remember when C was first introduced, I can still hear Pascal programmers scream it will never replace pascal, guess what… it did.

    R.I.P. Flash

    Reply
  58. fahad
    May 20, 2012

    Nice work. Why dont you write on how to create html5 designs?

    Reply
  59. Basheer
    November 15, 2013

    Google Images Gift Box – CSS 3D example
    http://www.addyosmani.com/resources/googlebox/

    Any knows how to stop rotating this box.. giving a stable angle????

    Reply

Leave a Reply