Comments on: Pure CSS3 Spiderman Cartoon w/ jQuery and HTML5 – Look Ma, No Flash!

By: Brandtley

Brandtley — Mon, 06 Feb 2012 20:59:11 +0000

Someone needs to update this to include Firefox 10. Works flawlessly a tad slow, but I think thats a video buffer/memory issue.

Superb my friend.

By: Prodyot

Prodyot — Thu, 26 Jan 2012 14:44:21 +0000

Genius.
I clicked “post comment” after commenting with a single word “Genius” as you see above this line.
I was informed that the comment was “too short” and was also asked to revisit this page to make a longer comment.
I think by now my comment should be considered as acceptably “long” or longer than my earlier rejected post
Yes, you are a creative genius.

By: Raks

Raks — Thu, 20 Oct 2011 09:48:48 +0000

All those people who think animation done in Flash cannot be done in HTML5, please upload their animation in youtube and provide me the link, I will give you back the same animation in HTML5

By: Steve F

Steve F — Tue, 18 Oct 2011 09:52:33 +0000

Seems like we are going backwards, this is a bad animation and whether flash is in or out its gonna take something better than this to convince me of future technology.

By: James W

James W — Mon, 03 Oct 2011 02:24:29 +0000

As everybody knows, the world is evolving and more and more EVERYDAY PEOPLE (NON DESIGNERS or DEVELOPERS) are actually turning to their mobile devices to perform everyday tasks, hence the obvious need for HTML5 and CSS3 based code. HTML5/CSS3 can be viewed on all most all platforms, mobile and desktop…… can FLASH????? pft NOPE!!!!

Remember your developing for Everyday people not tech Savy ” Know It All’s ”

Great example mate! Spiderman is the #hit

By: aroma

aroma — Sun, 25 Sep 2011 01:06:01 +0000

I woke up and smelled the coffee ages ago. I’ve never been a supporter or AOL, Microsoft, Apple, and certainly not Adobe. Does this mean I boycott their products? No. Does this make me a hipocrit? No.
I have watched Adobe grow over the years as they have added many things good and bad to their products. Suffice it to say, they have spent way too much time on seizing the market and cornering the stupid people in a corner. They should have spent more time on enhancing and correcting flaws in their products. Work with the community and people will be more accepting.
Those of you arguing that Flash is where it is at for animation, unfortunately; are right. But as time goes on, the masses of people you so vehemently hate and despise will push on. Open source developers, small & large corporations, and headstrong standards based committee members – all are aware of what is desired for the future and will work towards new technologies regardless of what you or Adobe wants.
This demonstration of a concept shows us something that was impossible just a few years ago. Adobe needs to wake up; fix your products, improve your pricing, adopt what the community wants or they will fold up like the 35mm print shops have done.
This is not a Walmart market and you would be well served to be part of the solution instead of the problem and adopt new methodologies where ever possible.
It is your job and duty to provide a well balanced design for your clients and their visitors which flash cannot do 100%. Regardless of cost and schedule, as you become more proficient with HTML5, css3, or any other newer technology as it comes along, you are keeping yourself marketable and uniquely skilled to solve a myriad of problems a customer may pose. Do not make yourself a slave to Adobe because you are afflicted with the lazy mentality that it i good enough. You know it is not.

By: heyvern

heyvern — Wed, 14 Sep 2011 20:58:39 +0000

Many who argue about HTML5 being inferior to Flash are concerned about the investment both in knowledge and the application. This happens to everyone in any job. When a new technology makes your existing skill set less valuable or less “critical” to producing a product or service you are inclined to find problems with the “new bad thing”. From robots building cars to desktop publishing.

I saw this happen in the print industry. When desktop publishing was just starting out, the businesses who had to do offset printing from computer files fought print designers like myself tooth and nail. They blocked us at every step. They said computer files were inferior, that the knowledge they had was far superior and that the computer could never handle “trapping” or full color separations using traditional analog photographic film processes. Keep in mind the people who did this stuff spent years learning those skills. They were right. It was a priceless skill gained over years of experience.

Needless to say, the print shops who refused to accept our computer generated files or printing films failed because they didn’t or couldn’t afford to invest in the equipment and knowledge needed to support the new technology. I saw many of these shops close down very quickly because they couldn’t compete.

Flash is still “better” or “faster” than HTML5… right now… but… uh… wake up and smell the coffee! A very short time ago HTML5 DIDN’T EXIST. Most browsers didn’t support ANY HTML5 features and barely supported most of the HTML 3 or 4 specs consistently or at all.

HTML 5 has come so far so fast and will only improve. The writing is on the wall. Flash is not the only kid on the block. HTML5 is the new younger kid with some cool tricks that is going to steal Flash’s job.

By: Nilesh

Nilesh — Fri, 09 Sep 2011 10:20:55 +0000

I really impressed by your work. Today i visited your website after reading one ebook about html5 gaming. Your website i excellent . Thanks for sharing these tutorials…..

By: Don

Don — Wed, 07 Sep 2011 17:28:22 +0000

Alternative? Sure. Replacement? Not a chance.
Its just using assets from other programs and tweening without Flash. This does not replace Flash when it comes to the power and capabilities Flash has. Mathematical animation may be smart but you’re blocking out the side which has been the skin and meat of the internet for all these years.

Tween is not the future.

By: Twinspirit

Twinspirit — Mon, 08 Aug 2011 05:03:24 +0000

I’m sorry, but… This is ugly. Really ugly.

By: Apollo

Apollo — Sun, 26 Jun 2011 16:52:54 +0000

Very Impressive. Will this feature eb avialable in Firefox and internet explorer ?

By: Jon

Jon — Sat, 25 Jun 2011 06:52:11 +0000

Seems the animation on FireFox isn’t all that great. Very jumpy and skippy. Oh well, here’s hoping to FireFox 6.

By: anthony

anthony — Fri, 24 Jun 2011 15:30:52 +0000

Thanks! Animation has been updated to support Firefox 5

By: Jon

Jon — Thu, 23 Jun 2011 06:16:17 +0000

FireFox 5 supports the animations as well.

By: OMG

OMG — Thu, 09 Jun 2011 19:36:11 +0000

Are you serious?? 1.7MB for that? Flash could do it in a fraction of that, and the graphics wouldn’t be blurry and jaggy, and the motion would be smoother. This is not progress.

By: hira kumar

hira kumar — Tue, 31 May 2011 09:51:32 +0000

superb .. CSS3 Rocks

By: AndieR

AndieR — Fri, 27 May 2011 03:20:57 +0000

First of all wonderful work. I do agree that Flash is in the past already, those that refuse to understand it are just pathetic. However I think this is not about that, it’s just a very smart way to exemplify how we should always broaden our horizons and that for each project there is a solution and no single solution fits all. I still remember when some so called web designers would create full flash websites ARGHHHH!

By: Roar

Roar — Thu, 19 May 2011 21:55:05 +0000

I think its excellent. And I`ve posted it on my web for HTML5 reference

By: samuelmq

samuelmq — Sat, 14 May 2011 16:56:33 +0000

Hmm… I hate moron ppl who doesn’t even know what animation is. U need a complete and robust interface and a set of tools to make your life easier as animator or game programming. Do you know how hard is to make anything with jquery css alone? Is a pain in the butt, we live in the real world and there are deadlines that we must adopt to survive and stay in the market. Adobe has evolved so much to fit the market needs. Adobe just can make a feature to export to HTML, css3 and the problem is solved.

By: Muhammed Umer Siddiq

Muhammed Umer Siddiq — Mon, 25 Apr 2011 23:27:14 +0000

hi,
please don’t talk foolishly i am developer of both jquery and flash and believe or not nothing can beat flash in next 10 years almost.
thanks

By: geoff

geoff — Mon, 18 Apr 2011 11:15:03 +0000

If you are trying to make the statement that this can overtake flash I would say “you have to be kidding right”. I have worked since 1998 in flash with quite a number of projects along with MANY other languages. I am presently working in 5, jquery, and css. Flash is as powerful as it gets on the front end with its OOP technology not to mention its ability to produce movie like motion graphics. I find it insulting to think that there are people actually purporting that these 3 technologies have what it takes. As someone mentioned in this post “the right tool for the right job”. While these 3 can do some things, they fall incredibly short of actually producing an RIA. I have seen this type of posturing before when some group has an agenda they want to push, they fabricate claims and get a following of people who dont know any better or also have a wish list they want fulfilled. It is just this kind of bickering that holds up progress of the web. a few months ago Steve Jobs made a claim about flash being an energy sucker on the IPHONE and problematic in other areas. People bought in to the hype. Along comes the Android platform and debunks his statement. Jobs would not allow flash developers the ability to tap into the OS and so he hamstrung any possibility of flash developers improving certain aspects of a program. Oh and did anyone give thought to Apple being the pusher for 5 technology? He wants to take marketshare from Adobe and get more people on to his proprietary app store. 5 has its place and so does Flash. Lets get on with it!

By: anthony

anthony — Tue, 29 Mar 2011 19:56:56 +0000

That’s nonsensical. How would I not realize that?

The purpose was defeated for YOU when YOU got hung-up on small technicalities.

jQuery is used simply to switch the scenes

By: anthony

anthony — Tue, 29 Mar 2011 19:51:23 +0000

Hi Dave,
Yes avoid using positioning values for animation. so instead of using absolute position values to move your object around, you want to use the translate3d(x,y,z) syntax, this triggers the built-in hardware acceleration in iOS devices http://mir.aculo.us/2010/06/04/making-an-ipad-html5-app-making-it-really-fast/

By: anthony

anthony — Tue, 29 Mar 2011 19:45:26 +0000

Unfortunately the reality for 2011 is that flash is on its way out for web based development. I’m not sure wjere flash fits in as jquery and other newer technologies are making flash obsolete.

Sorry :/

By: dave waclo

dave waclo — Tue, 29 Mar 2011 15:53:05 +0000

I’ve noticed that css3 animations of larger jpg images (450px wide) in a diagonal direction (transitions of top and left with absolute position) produce very jerky movement on an ipad, where it looks fine on a desktop in Safari. Anyone else notice this? Is there a solution? I’ve done the exact same animation in Flash and it looks a LOT better, so I don’t quite understand why flash is so bad.

By: Logan Bender

Logan Bender — Thu, 24 Mar 2011 17:48:30 +0000

Those proclaiming the death of Flash miss the most crucial reality checks here in 2011:
1.) using Flash creates the animation FASTER = saves the client MONEY.
2.) more end user’s browsers have the Flash player than support HTML5

By: Arthur Curry

Arthur Curry — Tue, 22 Mar 2011 04:44:33 +0000

You do realize that since you used a lot of jQuery to control the animation it kind of defeats the whole “Pure CSS3″ part of it, right? For it to be “pure CSS3″ you would need to not use the jQuery at all and just use – gasp – CSS3.

By: Soni

Soni — Fri, 04 Mar 2011 00:09:15 +0000

awesome work!! just started learning HTML5 ..

By: Matt

Matt — Thu, 03 Mar 2011 22:42:04 +0000

God, that was dreadful.

By: Sal

Sal — Wed, 26 Jan 2011 23:55:06 +0000

Great proof of concept.
The door is open for the next tool/framework that would help in creating animations in html5.

Don’t be surprised if Adobe will later give you the option of exporting (simple) animations in html5. Remember, at the speed things change in web development it is impossible to make any predictions.

Now make a business plan!

By: Rory

Rory — Wed, 26 Jan 2011 11:20:18 +0000

WOW no flash, thats pretty impressive. I’d like using flash but just jquery now as so many clients have iPhones and I was tired of hearing “there is a box on my website” an image fall back just didn’t cut it! The future looks bright in a flash free world…

By: Ted

Ted — Wed, 26 Jan 2011 05:27:52 +0000

HTML5 and CSS3 has come a long way, have a look at what can be done with 3D CSS:

http://www.youtube.com/watch?v=SThowUvqibw

By: Christian

Christian — Mon, 17 Jan 2011 16:36:20 +0000

If you could create it from scratch in Flash in an hour, it’s because you’ve used Flash many, many times before. This is the first time something like this has been done, so don’t try to compare the two. It represents the possibility that complex animation can be done without a $700 program AND a browser plugin. I understand people who have taken the time to learn Actionscript will be upset that there could be an Open future with options other than Flash, but things evolve. Put that energy toward learning a new language or just get the most out of Flash while you can, I’m sure it will never go away completely. Either way, please stop whining.

Personally, knowing Actionscript myself, I hope it gets replaced with a more organized language. 8 lines of code to put a link on a button is just unnecessary.

Anyway, really excellent work! Truly inspiring.

By: tuba

tuba — Sun, 12 Dec 2010 02:12:48 +0000

quite impressive, thank you for your blog, I am very interested in rotating the image

By: Kelly Johnson

Kelly Johnson — Sat, 27 Nov 2010 11:22:23 +0000

What the dolts who think “death to Flash” don’t know is that Flash does much, much more than animation. In fact, though it’s seed was in Future Splash which rendered vectors, I would go so far as to say that animation is its second most used feature with interactivity being the first.

AS3 is object-oriented. Unless a massive overhaul of the actual browser concept, let alone version x of browser y is tackled, is the fact why Flash will never be replaced by HTMLvwhatever and Jquery.

All I’m doing currently is using HTML, CSS and Jquery and I work for a very large investment company. But, my past is filled with Flash work and I’m sure in the future there will be more.

The right tool for the right job. This was a great demonstration/proof concept… that is all.

By: Edouard

Edouard — Mon, 08 Nov 2010 11:56:15 +0000

Hi,

I was wondering.. Is there a way of disabling a CSS3 animation If I don’t want to see it ?

Thanks

By: Al (UK)

Al (UK) — Thu, 04 Nov 2010 00:27:52 +0000

You Adobe lot crack me up. The designer banging on about flash working on his phone but not this. Show me flash on the iPhone! Or maybe we should try Silverlight? But only on Windows Phone 7 (but not on WinMob 6.5!).

Seriously, you mono-minded lot really cant see it can you?. HTML5 is all about open standards, about finally realising W3Cs goal of unifying, so that in 15 years time when someone builds a site, they build it once and it works on all devices on all browsers – full stop – no plugins, no constant, ooo we fixed a font, YOU MUST INSTALL FLASH VERSION 756 OF THE YEAR NOW OR DIE! I’ve been buildign websites since 1995 and i always look for internal work cos i get sick of this x-browser compat shit.

This will never happen whilst vendors release propriety platforms, which then get blocked by one vendor or another and people grasping onto their pony livings of being flash/silverlight “designers” driving them qq-ing into their 10 year old Audi TTs.

Give this guy a break. He didnt sound to me as if he was wanting to win prizes. Its just a showcase of a tech! HTML5 wont be ratified until at least 2012, so you cannot expect it to be supported fully or even perform that well everywhere just yet!

Good effort mate!

By: Nicholas Bester

Nicholas Bester — Wed, 20 Oct 2010 12:12:52 +0000

This is pretty neat but for animations (similar to the one presented above) I’ll still stick to Flash.

Still very awesome to see what can be done with HTML5, jQuery and CSS3. Performance is a bit bad as well but I’m pretty sure as things develop they’ll iron out the problems

Nice one

By: gates

gates — Sat, 16 Oct 2010 06:55:59 +0000

Death to flash. While this may not be stake of holly through its miserable heart, it is the opening of the proverbial Jeanie’s bottle, Freedom from the fat heavy garbage that is flash, its coming and coming soon.

By: James Gaunt

James Gaunt — Fri, 08 Oct 2010 19:58:51 +0000

This is fantastic. I can’t wait to see more of this kind of stuff out on the web (no pun intended)! I recently had the displeasure of trying to develop some AS3 Flash stuff, and frankly I was disgusted with the quality of the tools that Adobe have put out. It seems to me that Flash has benefited from a monopoly on web animation for too long, and Adobe have been lazy as a result.

Of course I’d prefer that we all started working with HTML/CSS/Javascript so we can drop this backwards, closed and poorly implemented Flash rubbish – but at the very least work like this should give Adobe the kick up the arse they need to actually invest in producing a modern development environment.

By: mariano

mariano — Sun, 03 Oct 2010 23:02:44 +0000

This is just amazing!!! I read ALL the comments, and all I can say is NO ONE single person said anything about the SECURITY ISSUES Flash has. Although I believe CSS/HTML new versions are still far from the animation quality you get with Flash, this shows that potentially many “little animations” will not need Flash anymore. For me, as a web developer, being able to reduce Flash usage means that I also reduce the chances of attacks to users in my website. Congratulations for a well executed and promising piece of work

By: ELARAJI

ELARAJI — Fri, 01 Oct 2010 21:11:07 +0000

That’s Just Fantastic, I can’t say More!

By: NameIsNotImportant

NameIsNotImportant — Tue, 21 Sep 2010 22:25:35 +0000

I’m amazed at the amount of comments stating how this can never compete with Flash. As someone stated earlier, Flash is a mature product. If I got up one day and said “hey, I need an animation,” Flash is most likely the first logical choice for development. I don’t think many would deny that.

I saw the animation, and the first thing I did after viewing it was smile. I’m impressed with how much could be done with HTML5/jQuery/CSS3. Now, the practicality of such a project for prime time isn’t there yet, maybe never, regardless of what Steve Jobs says. We would need authoring tools to be beefed up, and we would need more standardization with our viewports, from smartphones to tablets, notebooks to desktops.

I don’t know… I got into Web Development during a time where the spinning globe GIF was king, and terms like CSS were barely used. I’m proud of the advancement altogether.

How can negative thoughts even come to mind after watching this? OK, so you’re tired of all the HTML5 talk, like it’s going to change the world, and what you’ve seen so far doesn’t register a blip on your radar. Completely understood; you have your opinion and you indeed do have several facts that you can point out to others. However, knowing the tech used to make this, doesn’t that make you smile at least, for the sake of the love of development?

I don’t know about other people, but I’ve wanted to develop since I was young, and the passion back then was great. The trick was to keep the passion as I got older… It seems some people became so arrogant and judgmental over their years in the business, that they act all high and mighty, and butter wouldn’t melt in their mouths.

By: Enrique R Pascalin

Enrique R Pascalin — Mon, 20 Sep 2010 20:24:23 +0000

This is just sad. About 90% of the comments posted came from amateur designers or something alike. They are missing the point here. The author is NOT an animator (neither a designer I think) and he did this work with no complex animation tools (as a matter of fact is just plain text edited anywhere).

*Can’t you bunch of morons see the value?
-Animation with no plug-ins required
-Just Open Source and W3C standard technologies
-This is a demostration of the power of CSS3 not a designer or flash competition
-In just some time, this will be by all means cross broser compatible
-Audio, animation, video, vectors, canvas and other media technologies will need no more any propietary software
-This will be really easy to develop and maintain and not much time will pass to see good editors or WYSIWYG tools for this kind of job
-This kind of work encourages us to drop disgusting propietary shit such as adobe monopoly technologies.
-Flash is easy because it has a WYSIWYG builder to drag a and drop elements; this same animation made from scratch with AS3 without the expensive flash software will require more effort.

Can you buch of monkeys see the point? THIS WORK RULES. THIS IS THE FUTURE.

By: chuck

chuck — Thu, 16 Sep 2010 21:52:22 +0000

As a long time UI guy, this really blows me away. Great proof of concept. When you stop to consider how powerful this can be when combined with jQuery the possibilities are really endless.

For the record – early versions of Flash did little beyond keyframe animations/transitions. This technology is very promising.

By: kyt

kyt — Sun, 05 Sep 2010 17:40:03 +0000

I can answer why HTML5, CSS3, and JavaScript has to develop to the point where they can replace Flash. Flash is not free nor opensource. lts a paid thing. Some of us still can’t afford to buy the ability to program in flash. Adobe owns Flash. The world owns HTML5, CSS3, and JavaScript. The world can create away without paying royalty fees and other fees that poor developers can’t afford. Thats why HTML5 and CSS3 need to be developed more. Its why those 2 and JavaScript needs to be developed more so that they can do more without taking so much resources.

Currently, there is even works to make JavaScript capable of MMORPGs. Its the wave of the future – to improve whats available so that no one is left behind in the dust.

By: greenman

greenman — Fri, 27 Aug 2010 17:58:15 +0000

The style sheets must be a mile long. It seriously bumps my processor speed. Trying to hand-code this on a daily basis as a professional animator would be tedious. How about writing an interface that will speed up the process? The first time I played it, it came across as a slideshow, not in sync. When I replayed it, I could see the actual animation. It does a fairly faithful job of mimicking the opening credits to the original cartoon series. Peter Parker would be proud. Now get out of the dark computer cave and get some air.

By: Kilian

Kilian — Tue, 24 Aug 2010 04:03:26 +0000

Fun, but absurd. Also the image quality and the quality of animation is not really top notch to say the least.

Most animators usually use special tools for their jobs anyway like Anime Studio Pro (aka Moho), Animate, ToonBoom Studio Pro etc. Those tools can either export Flash or QuickTime movies. I usually prefer to export movies nowadays anyway, because the playback is smoother and there are no synching problems.

By: Mendim

Mendim — Mon, 23 Aug 2010 00:58:05 +0000

That sure is impressive, but, I would never try something like that as a substitute for Flash.

By: jack

jack — Sun, 22 Aug 2010 22:33:19 +0000

This made me smile, especially the awesome theme tune. I well really excited for the time (that seem so far away) that all browsers are compliant. Awesome animation

By: John Miller

John Miller — Sat, 21 Aug 2010 15:47:02 +0000

Very Very impressive!

Everything starts somewhere (including flash) and here comes reality! Unfortunately for flash dudes, we understand they feel threatened by the capabilities of html5/css3 catching up.

Bill Gates was quoted in 1981 saying “No one will need more than 637 kb of memory for a personal computer” http://en.wikiquote.org/wiki/Bill_Gates. He later ate his words.

DON’T STOP IMPROVING. I believe flash is almost at the end of the line for four main reasons:

1. Technologies keep changing as soon as you think you have it all figured out, something else crawls out of the woodwork.
2. Too many competitors of Adobe Flash and Lots of variations for it plus better products for coding flash now exists that use different raw materials (something that was unthinkable two years ago.) Different raw materials equal different product at the end of the day. Different product means different rules of the game.
3. Although computers and other digital electronic devices that have RAM in them continue to be more powerful and are growing bigger and better, so are applications and OSs memory requirements for them. No where in history including recent history does it even hint that bigger RAM translates to means that applications will perform better. That is just but a consequence. Application developers require more RAM so they can help users do more (pushing the RAM boundaries). More is not necessarily better. Better product is a result of better workmanship/skills (which by the way, depends so much on the tools used). css3 uses RAM better (not the other way round -> better RAM). It’s the Most likely to be the one that gets adopted in the future as the tool of choice. Applications are the ones that push RAM not vice versa. Gadgets that show flash better is because the codec are available free to the manufacturers (more of a business reason than a technical one) and support provided via subscription (which hurts in the long run.) So Java and Flash were adopted for the same reason: Code once, run everywhere (cross-platform capability.)
4. Remember corporations are still competing. Check out websites for the top or best performing companies, firms, institutions, etc, or serious firms like NOKIA (e-commerce sites), GOOGLE, NASDAQ, YAHOO, government sites, etc that you know of. This are the guys who pay money, and none of them will pay anyone to play with their information on the screen (and especially their clients. Try working with them). Check out their code: HTML! or at least most part of their pages are. If flash is available, its carefully used or used responsibly (meaning only where absolutely necessary: i.e. only where html/css or java cannot go for now). Bandwidths are important even if they come almost free. Pages have to load faster. People want information when they want it (not wait for it); They also want it the way they want it (more like the way they expect it). And they want that information to behave they way they want it to (like when they want to save a pages for later reference – which mostly happens offline). With so much information on the internet, people have very little time to check out all of the information on one website. They want to move on if they can’t see it there, or at least see a pointer.

To close it up, Anthony Calzadilla is one important dude on the internet pointing us to the next step in www which is already there. He’s in the footsteps of Tim Berners-Lee when you choose to see things clearly. It’s a choice.

By: Chris Silvey

Chris Silvey — Mon, 16 Aug 2010 04:57:43 +0000

I take that back. I guess Firefox isn’t quite there yet. Looks fine in Chrome. I just have to wait for the browsers to catch up.

By: Chris Silvey

Chris Silvey — Mon, 16 Aug 2010 04:52:55 +0000

Not impressed at all. It acted like a very bad image rotator. I was hoping that I could use this as an alternative to flash ads.

By: housemouse

housemouse — Wed, 28 Jul 2010 16:54:16 +0000

Great work!! While not the most practical for current real world situations, it’s absolutely an eye opener to what can be achieved with HTML5/CSS3.

I think I’m going to be pushing this over flash for some of my restaurant clients. I doubt my animation will be as intense as this, but considering that the iphone/ipad doesn’t support flash and google will be able to index this better, it’s an option that needs to be addressed.

A little less flash and little bit more HTML5/CSS3 might just be what is needed for my clients who rely heavily on social media and google rankings and want the flashy openings…

By: Deirdre

Deirdre — Mon, 26 Jul 2010 11:18:18 +0000

You animation demonstrates the possibilities of the HTML5 medium admirably, how long did it take? It worked very well on my computer

thank you
Deirdre

By: DcTurner

DcTurner — Sun, 25 Jul 2010 21:55:50 +0000

@Que

Actually, you could produce the image assets in GIMP (or any other free image editor), then you could download the FREE flex sdk and FREE actionscript coding environment “FlashDevelop”, then put together a better-performing, coded animation in a fraction of the time.

Technically, Flash development doesn’t have to cost anything at all.

That aside, it’s always nice to see people pushing the limits of what tech can do.

By: Avinpr

Avinpr — Sun, 25 Jul 2010 17:57:36 +0000

Just an awesome piece of work!! Even if this is slower than doing it in flash, I still applaud your creativity (which I’ve got absolutely none of). It’s tough doing this for browsers and with HTML5 around the corner, this is a perfect example for the devs to show their bosses why one should ditch developing for plugins and use some native browser technology. Kudos Anthony!!!

By: chester

chester — Thu, 22 Jul 2010 18:53:40 +0000

Hate to have to be blunt here, but if you’re not a web developer, your opinion about this project doesn’t really hold much weight.

Anyone actually in the industry should see this as a great first step into not getting rid of Flash entirely (because that will never happen), but getting rid of it where it’s cumbersome. I started my career relying heavily on Flash for interactivity and now develop 100% of my interactivity with AJAX because it’s just easier to work on, expand, fix, troubleshoot, hand off to someone else to work on, and scale up or down. My bosses likes that because
1. They don’t have to buy another Flash license and
2. Because the less time spent on development means the less money he has to spend.

Not to degenerate into another Flash vs. HTML5 argument, my point is that while this animation does suck because it’s basically nothing but a bunch of fundamental motion tweens from Flash5, the fact that it’s being done entirely client side without any plug-ins is extraordinary and stands on its own.

This is pretty god damn impressive if you ask me.

By: Louis

Louis — Sun, 18 Jul 2010 11:19:49 +0000

Extraordinary effort. Thanks for sharing. I applaud your generosity.

By: kyle jackson

kyle jackson — Thu, 08 Jul 2010 18:46:21 +0000

let me begin by saying THANK YOU to the author for creating this animation. it really is outstanding! i can’t understand why so many folks keep pointing back at “oh flash would have done a better job, would have been faster, would have been easier” – that’s NOT the point.

seriously – the people leaving comments like “I’m not even a web designer, but seems obvious to me”… that statement completely negates itself. LOL. you cleary don’t get it, and it is not for you.

truly, what the author has accomplished here gives us an idea of what is *possible* with HTML5/CSS3. who gives a crap if it’s not perfect? doesn’t mean it HAS to be used that way (or perhaps even SHOULD be used that way)… it is the concept that matters most here, and it certainly has piqued my interested in what CAN be accomplished with HTML5/CSS3.

again: many thanks to the author – i am very grateful.

..k..

By: Jah

Jah — Wed, 07 Jul 2010 14:16:09 +0000

Sorry, Que, but I must let you know that FlashDevelop is an opensource software allowing you to create ActionScript 3 projects for free…

By: Que

Que — Wed, 23 Jun 2010 14:06:56 +0000

None of these comments speak to the true point that authoring in flash is expensive. Yes Adobe practically gives it product away to students, only to lock them in for years by updating the platform every year with a new upgrade fee. The real benefit to this example is that the author used open tools with very minimum start-up fee. For him to create this with Adobe it would cost him $500 US just to draw the animation, tack on CSS & flash authoring he is at $2000 not including a machine powerful enough to run it.

Contrary to the Flash FUD in these comments the Internet is about interactivity which means the more people enabled to communicate the better the medium will become. Flash has its place in that purpose just as HTML5 will have its place.

By: Frank Cohen

Frank Cohen — Sat, 12 Jun 2010 16:09:31 +0000

Congratulations on the great project. Well done.

I’m wondering how you avoid sprite flicker? I ran your Ajax animation on a Mac Book Pro with 2.66 Ghz CPU. I didn’t see any flicker, even when you moved the background image.

Is there some sort of frame swapping going on?

-Frank

By: Don

Don — Thu, 10 Jun 2010 18:36:55 +0000

Let’s us admit that cartoon type animation on the web will be done in Flash for a very long time. CSS and JQuery can be used for slideshows and moving things across the screen (albeit sometimes clumsily). It seems to work well for gradients and dropshadows and particle effects, but Flash IDE will be used anytime that the timeline is more advantageous than programattic animations.

By: Jah

Jah — Tue, 08 Jun 2010 14:08:05 +0000

Ok, it is technically impressive, all right. But graphically, it sucks big time! I hope that Steve Jobs does not count on that kind of animations to justify the Flash restriction on Apple products, because he might have to wait for a good 5 years before seeing anything merly as good as Flash happening with HTML5!

By: melissa

melissa — Wed, 02 Jun 2010 20:36:00 +0000

(and will be for a long time)…

How much does Flash pay you to say that?

By: xtfer

xtfer — Wed, 02 Jun 2010 12:58:59 +0000

The animation was primitive, but it’s a proof-of-concept, and for that it works superbly. Trying to compare this to Flash is stupid. Flash is a mature product, HTML5 and CSS3 are still in their early days.

If you don’t understand why you might use Flash or HTML5/CSS3 in different contexts, you need to learn more about web development.

By: Justin

Justin — Tue, 01 Jun 2010 18:19:06 +0000

while it is amazing that you can do this in html5 and css3, i can just imagine how long this would take to do. great job, but, i dont see this replacing flash by any means.

By: alfredo

alfredo — Fri, 28 May 2010 23:01:55 +0000

If anything, this animation proves why flash is necessary (and will be for a long time)…
that crappy spiderman barely moves… sorry I had to say that, I’m not even a web designer, but seems obvious to me

By: Andres Jaimes

Andres Jaimes — Fri, 28 May 2010 15:50:55 +0000

WoW! this is as amazing as spider-man

This is a good way to show what CSS3 can do…

Thanks!

By: manray

manray — Thu, 27 May 2010 14:54:21 +0000

This is a great example of how all of the hype and chatter about html5 is so ridiculous. Ok, kudos to you for taking the time to make this. But, as has been stated, this is primitive beyond belief compared to what Flash is capable of. By the time html5 reaches the place where Flash is (at least 5 years) Adobe will have Flash running circles around it. There’s also no decent authoring tools for html5 and, again, when they arrive they won’t be able to do the things that Flash can do NOW. html5 has it’s place for sure, it is better to use it for certain things but you are not going to replace the robust features and performance of Flash for doing animation and complex interactivity.

By: Ty

Ty — Thu, 27 May 2010 11:10:15 +0000

Well it works great on my computer and it looks amazing as well. I’m kind of shocked that all of the animation was done with just code.
Congrats for putting in the effort and extra points for making it Spider-man!

By: Harold

Harold — Sat, 22 May 2010 16:40:42 +0000

jQuery evidently has a long way to go.

By: Ingrid

Ingrid — Wed, 19 May 2010 16:55:51 +0000

“New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too). Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.”

-Steve Jobs

By: @Chris Anthony

@Chris Anthony — Wed, 19 May 2010 13:35:52 +0000

You are right, but DVD brings major improvements for the users. html5/css3 dont.

but now you are going to change flash to html5/css3 – and you would like to show that nearly everything flash currently does is possible in html5, but it is not the same. ever seen the type renderer in flash? forget html+css. also: flash blocker wont work then you will be penedrated by ads in the future, so where is the improvement?

and: every browser has its own render engine, different video formats etc. why should a media agency take this effort to test all browsers instead developing for only ONE flash player?

i dont want to be misunderstood: i am happy about the improvements html5/css3 would bring, and i will use these – of course. but i am not blue-eyed, not every new version of anything has ONLY improvements.

By: Curtis Wiens

Curtis Wiens — Fri, 14 May 2010 19:38:01 +0000

Wow that looks like a Flash 5 animation. Are we going to see a lot of this with HTML5 along with skip animation? I bet it took way too long to build too. The animation so far with HTML5 looks like where we were at with Flash 10 years ago.

By: JDW

JDW — Fri, 14 May 2010 02:57:17 +0000

Keep breathing folks… It’s an experiment! @rjw summed it up well. Now get yourselves a girlfriend.

By: Chris Anthony

Chris Anthony — Thu, 13 May 2010 13:57:42 +0000

@Jill, XHTML 1.0 and CSS1 don’t work in my Lynx. Now what am I supposed to do?

The DVD format was released in 1995. In 1999 it had a little less than 5% household penetration, and the discs and players were expensive. Clearly, therefore, VHS was the superior format, since it was cheap and everyone had one. Right?

By: Rickyh

Rickyh — Thu, 13 May 2010 09:57:47 +0000

Dude this must have taken so long. I Knew it was possible but now it’s reality. Well done

By: Niels Beekes (Aniforce.nl)

Niels Beekes (Aniforce.nl) — Wed, 12 May 2010 23:53:55 +0000

Well, You should have made it in flash… It’s pixely and when my android phone tries to play it, it just shows random frames and mostly pieces of the spiderman in backgrounds that don’t belong to that shot. Also there is no sound what so ever. And my phone runs flash like a charm… Allthough it runs a little slow right now. But hey, it’s a budget phone. Though, when HTML5, CSS3, and stuff finally come up with something to animate that actually works well and gives good results, phones will have developed so well that Flash will run as good as on any PC or Mac. Why try to improve on something that already works so well?

kind regards,

Niels Beekes
Animator (http://www.aniforce.nl/)

By: Jill

Jill — Wed, 12 May 2010 16:36:20 +0000

This works in 6% of browsers and spikes CPU usage. Other HTML5 apps such as google wave crash and are sluggish. If you want something to work everywhere you have to use XHTML 1.0 and CSS 1. I have been hearing this excitement about HTML 5 and JS this and that but I have yet to see anything amazing. I challenge these developers come up with something really great and start a site like FWA to showcase it.

By: Matteo D

Matteo D — Wed, 12 May 2010 00:21:25 +0000

While I admire your work and passion…….. anyone who thinks they are going to be competitive making a living creating animations like this is drinking way to much draino.
@Kris if thats rekindled your interest in HTML5 and CSS3 I have quill and ink technology which will rekindle your interest in the Middle Ages.

Peace.

By: Anthony Calzadilla

Anthony Calzadilla — Tue, 11 May 2010 18:03:39 +0000

Looks like absolute garbage. It’s inexplicable how lazy people have gotten, that this is tolerated as “animation.”

By: Kris

Kris — Tue, 11 May 2010 17:18:54 +0000

Wow, this is really awesome. “Amazing.” You’ve rekindled my excitement for HTML5 and CSS3. Nice job and well done!

For all of you who are saying this or that is better than the other: Use the right tool for the job. Yes, this animation could have been done better, faster, more widely available if done with Flash, but this is a proof of concept; A demonstration at where non-Flash technology is, and the direction in which it’s going. It’s not suggesting that one technology will replace the other.

I expect HTML5 and CSS3 will continue to improve over the coming years, but Flash will always have its place. We, as multimedia developers, have more tools to from which to choose. Use the right tool for the job. (I love the hammer and the screwdriver analogy.)

By: Andrew Odendaal

Andrew Odendaal — Tue, 11 May 2010 14:10:04 +0000

Very nice! BRAVO!

By: Anders Sällberg

Anders Sällberg — Tue, 11 May 2010 11:39:38 +0000

Wow, it’s amazing but… why bother?

In five years when this standard can compete with flashtools available today, the tools for creating flash will be much better then today. Can it catch up?

You can do so much more with flash than just animation. But… AS3 will never replace C#.

By: TwFlash

TwFlash — Tue, 11 May 2010 07:48:02 +0000

You don’t use the right tool to do that. I’m sure you could have making it in flash in a drastic shorter time. With better portability. With better perfs.
Use HTML5 for videos, for text, for simple anims effects.
And use flash for bigger animations, games and webapps.
Time is money.

By: Roofus

Roofus — Tue, 11 May 2010 03:50:08 +0000

Once upon a time you needed to be able to draw to be an animator, then you had to spend years honing your animation skills to become good at it. Now, if your a dick head nerd with no real artistic ability you can make any old piece of crap, pass it off as animation. I weep for the future of my beloved animation industry.

By: Chris Anthony

Chris Anthony — Tue, 11 May 2010 02:09:58 +0000

I truly don’t understand why everybody is making such a fuss over this “auto-mobile”. Why, my horses can pull my carriage faster, and the carriage is better-appointed than any device that Henry Ford can produce. Mechanical conveyance is merely a passing fad. Besides, were the carriage to lose support, think of all the tanners who now produce buggy whips who would be unemployed! An economic and moral disaster, I say.

(Pretty impressive, Anthony. This is the first HTML5/CSS3 animation I’ve seen and it’s remarkable for how young the technology is.)

By: Kasper

Kasper — Mon, 10 May 2010 21:04:38 +0000

Holy shit… You MUST tell me about that stuff, where did you get something that made you THIS high!!?!

By: Zorro

Zorro — Mon, 10 May 2010 19:09:03 +0000

I am sorry I don’t want to be negative. I am sure you put a lot of work into this and cobbling together css/html/js is no easy task in order to create this animation, but this SUCKS… and I don’t give a hoot how many JS script kitties are impressed. I know the kiitties hate flash and want it to disappear. However, this looks like the early stages of flash when it was called FUTURE SPLASH and is kind of like telling a soldier no need for the fully automatic machine gun that shoots 2000 bullets a minute, when use can use a bow and arrow which is fully open…

By: Nicolas

Nicolas — Mon, 10 May 2010 16:26:30 +0000

Cool, nice animation!! pure ccs3

By: Amha Mogus

Amha Mogus — Mon, 10 May 2010 15:31:39 +0000

This is really awesome. Great job and thanks for sharing!

By: Glyn Moony

Glyn Moony — Mon, 10 May 2010 12:44:49 +0000

That is really, really cool! Makes me think that flash might be on the way out (Even though it’s sill got life in it yet! And more uses than just animation!). All we’re really short of now is a good pre-loader, and sequencing control.

Well I’m sure that some genius will be on it already

Thanks mate. Great to see cool things can still be done!

By: YrZ

YrZ — Mon, 10 May 2010 12:29:24 +0000

Man, this is beatiful…)
Hi from Russia!

By: Kapil

Kapil — Mon, 10 May 2010 07:33:51 +0000

Awesome. CSS & HTML have come a long way.

btw, the punchline “Look ma, no flash” is too good

By: Ripul

Ripul — Mon, 10 May 2010 03:17:16 +0000

This is awesome. I think flash would be completely wiped out in few years. In chrome it was just like flash movie. great work!

By: Waheed Akhtar

Waheed Akhtar — Sun, 09 May 2010 19:12:15 +0000

What a waste of time doing this crappy animation.
HTML5 can’t beat Fflash!

By: muhammadiq

muhammadiq — Sun, 09 May 2010 02:27:45 +0000

i Loooooooooooooovvvvvvveeeee It

By: Isaac

Isaac — Sat, 08 May 2010 22:22:23 +0000

Is this all you can do in HTML5/ Shame! Flash did this 10years ago.
Can only run in 2 minor browsers? What’s the essence?