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
This is 20.000 particules running in Flash: https://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!
Just checked out your demo on my iPad, looks great!
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.
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.
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.
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.
The canvas tag still has a long way to go before it will supersede flash!
Finally someone who can spell.
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
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.
good luck getting html5 to be cross browser compatible before 2012
@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.
oops.. should’ve said 2020
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.
i’m a flasher but i’ve to admit html 5 is cool and promissing
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.
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.
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.
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
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!
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
canvas will be a very serious competitor, like Chuck Norris can do a wheelie on a unicycle. go css web 3d!
really, really unimpressed. sorry. as someone else said – would have been impressive in 2001?
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.
Haha Jae, funny picture of Chuck on an unicycle! 😀
Not impressed though…
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.
Demo is great!
Woww HTML5 is the future! Thanks!!
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.
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 : /
Here is another CSS3 3D example.
Click and drag
https://bin.bmson.com/dg/
I personally like HTML5 more than flash. So I love this article thnx for the inspirational demos.
Few examples are jquery not an HTML5
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…
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.
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.
Really bloated code. I am not impressed at all.
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.
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.
Can “HTML5” do this? https://www.unfocus.com/2010/06/29/the-bunny-video-eplodes-explodes/
;-P (Kudos if it can!)
yes, but the demo from chrome experiments shows that the exact video is broken into larger pieces than the site u provided.
This guy has hundreds if not thousands and most blow these away…
https://www.dhteumeuleu.com/
“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!
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.
HTML5 looks neat! I’d kill to change https://www.mytubedesign.com to HTML 5
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.
Just LOVE liquid particles!!! Wish I knew how to do stuff like that.
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.
I am a flash developer but i do admit that HTML 5 gonna replace it very soon
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.
Try to record web cam using html5 or stream a live TV channel 😉
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.
THANK YOU @Jock
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.
I cant believe this!!!!!! really html 5 can do that!!! OMG!! 🙁
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…
As we’ll be seeing Flash in the past.
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
The last one, bomomo, is Flash.
Good to see. Flash is complete crap.
Absolutely awesome article, great examples, looking forward to some of these older less capable browsers dropping off so we can start using HTML5 completely!
Ironic – the banner on the bottom of the page says ‘Create free stunning flash websites’ 😀
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.
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
Fantastic article! I had no idea so much could be accomplished with the HTML5 Canvas.
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.
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)
“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..
https://www.zdnet.com/blog/networking/flash-is-dead-long-live-html5/1633
https://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..
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
About as much as Python/PHP were replaced by Perl…
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.
I suggest you got o https://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 ?
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.
Here’s a really cool gallery:
https://www.hippostudios.co.uk/?S=Animator&P=AnimatorGallery
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: https://senses.artpulse.me/
More info: https://artpulse.me/articles/Senses/
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
Nice work. Why dont you write on how to create html5 designs?
Google Images Gift Box – CSS 3D example
https://www.addyosmani.com/resources/googlebox/
Any knows how to stop rotating this box.. giving a stable angle????
All the above examples are great:). Is all the above examples developed using only HTML5 or with any other supporting JS libraries??