Hi Rachel,
The new W3C Web Animation API will give developers cool new features such as media synchronization so you won’t have to use nasty JS timers hacks.

Another way to create a parallax effect would be to use a translateZ() transform to arrange your layers on the Z axis and animate the perspective origin. You will get a “true” parallax since this is created on a real 3D model, no more guess work and approximation.

Cool stuff, thanks.

You will obtain better result for ‘flash-disabled’ device with animated gif

For example this animation don’t work in the mobile wolrd. (slow and buggy on Android)

Btw it’s easier and faster to do :
1) build your art in Flash IDE
2) export to .gif
2bis) export to html 5 (canvas) (same perf issue)

The truth is css3 animation or canvas animation use far more cpu than Flash based one.

@KEV ADAMSON

Adobe’s Edge and Animate products, while having lovely interfaces, produce subpar output, as you said. JS-based animations chew up CPU faster than CSS-based ones, making these tools two years too late and thus not fit for production use. I’d recommend using Flash w/ fallback over using them if you don’t want to or are not capable of hand-coding.

Hopefully some day someone will create a program that gives you a user interface to love and output that keeps up with the rate of change. (Right now, for instance, CSS animation output with a feature detect to a jQuery animate() fallback.)

Until then, people who hand code animations will be able to reap big rewards for making things that work on iDevices. The techniques and technologies are only getting better and faster.

My prediction is that the call for web-based Flash animation will continue to shrink like Florida’s coastline under the assault of rising sea levels. However, using Flash animation to produce full-length animations like “My Little Pony: Friendship is Magic” will continue at its normal pace. The people at Adobe are moving Flash toward a cinematic tool and away from web production. (A Flash animated film can be embedded as a video file on a web page without needing a special plugin to play!)

In the interim, we’ll see animations being used mostly for decorative elements that look fine static as a last ditch fallback.

That said, I can’t wait to see how right or wrong I am two years from now!

http://www.adobe.com/devnet/createjs/articles/using-flash-pro-toolkit-createjs.html

Although many features unavailable (even motion paths) presumably this will.be Flash’s latest lifeline. Flash was saved almost 10 years ago by video, while the last few years it’s a fallback for older browsers. CS7/8 will most likely see Flash producing less js and more css3 animations… Just look at Fireworks (although they make out gradients and rounded edges are ‘difficult’ to code!). Bring able to handcode can always make your code slicker, but this may just be editing your uncompressed output code rather than typing Matrix style into NotePad. I learned to handcode HTML years ago, and older iterations of DreamWeaver (and other WYSIWYG editors) would bloat pages with masses of redundant code. It’s likely that tools will get better as HTML 5 becomes standard and we can forget older browsers… But I’d almost put money on Flash becoming the defacto web animation tool, again.

I’ve just done a boat load of christmas e-card animations for clients. This year is the first year where there has been a lot of demand to do them in ‘html5’ and to ‘make it mobile compatible’. In many cases, once they have had it explained that the cost will be a lot higher, the end result will be a lot simpler and have less shine (e.g no particle effects, blending modes, accurately synced sound, 3d, that it won’t work on old browsers typical in corporate environments and will work poorly on mobiles) they have reverted back to flash which has a far better ROI and quality of result. Unfortunately articles like these stokes hipsters and the blogotwittersphere with the end result that creative directors and account handlers and other assorted people with an eye on fashion, but with no real handle on the reality in the trenches, are doing clients a disservice. Totally agree with Mparaiso!

@Rachel Nabors

Thanks for confirming my suspicions :)
I’m fine hand-coding basic transitions, but anything more complex is inappropriately time consuming.

I’m looking forward to the tool that gets the balance right.

@mparaiso

Yep. You make some interesting points to consider.

Hi Rachel

I’ve recently created this: http://www.kevadamson.com/demos/big_free_world/animation.html

I used Adobe Edge, which I’m impressed with as a program (very much like Flash, so a familiar UI), although I’m not overly convinced of the code output.

In hindsight, I think I would have created this animation in Flash using vectors. Reasons being:

* The only browser that seems to render the movement smoothly is IE9
* It eats CPU. I wanted to go CSS so it would work on all devices, but while they have the support, they don’t have the power to run it smoothly
* It’s file size heavy for what it is – SVG would probably be better for images, but support and render quality seems inconsistent

I realise I could save file size with slightly better image optimisation, and it might also be the case that the code Edge renders is sloppy, but I went through the same processes with Edge as I used to with Flash, and it rendered something that, in real-terms, is inferior. So perhaps it’s a combination of:

a) Edge not being quite ready yet and
b) CSS animation not being quite ready yet and
c) My knowledge of the best ways to create the effects, not being quite ready yet :)

With Flash I could almost guarantee a playback quality across all browsers (that have Flash installed of course ;)) and merely have an image fall-back for the apple devices and users without Flash. That just feels tidier and a safer option – certainly for client work.

I guess my point is that CSS animation is the future, and it is certainly great for basic transitions on websites or apps built for use on specific devices / browsers (where you can guarantee SVG support and smooth rendering). I think you can also get the best out of it if you hand-code, as it seems different methods of creating the same effect have a massive difference on file size and render quality. But until I can use a program like Edge in much the same way as I used the Flash program, and create an animation with the same file size and consistent render quality as the SWF output, I can’t see myself using it just yet for stand-alone narrative animations for client work.

Would you agree? Do you have any thoughts on Edge?

@RACHEL

Great article!

Is it OK for me to translate it into Arabic and post it on my blog (referencing this one, of course!)?

—-

@mparaiso

I love and respect the work that Flash does, and I think it’s still very usable for certain areas.

However, as far as the web goes, I can certainly see Flash losing ground for a bunch of good reasons.

As for performance, I kept this page in an open tab on Firefox (with the animations running) for the last 5 hours and had to problem whatsoever.

Just a friendly response :)

I created some css3 animations for a landing page I made – http://boatbound.com/ and I’m really happy with the effect, however the CPU performance is terrible. I just looked through all your animation examples and saw pretty great CPU performance through Chrome. I’m not sure if my higher CPU usage is because I’m using larger images, or because I’m moving the actual dom elements rather than just moving background images. Any suggestions?

I may try to convert to using background-position animations to see if that helps.

It’s great to be reaffirmed about how much can be done with CSS3 now. Thank you for your time for doing these beautiful examples.

I love the sound of ‘flashless’ and ‘browser empowered’ animations. A passionate front-end developer must wish to experience working on projects that embrace such techniques.

Arguably majority of future friendly work happens for mobile devices. Project teams strive to release a product that works faster than ever before. Which puts these techniques under a whole bunch of limitations as where and when they can be used. I would limit this for a smart ‘preloader’ and ‘progress bar’ animations (preferably without an image request).

I love the idea of keyframes but haven’t had the chance to use them practically yet, I really like their use in this site http://visitbruges.be/home. I’m sure there’ll come at time when the animation techniques will be used more often, perhaps when html5 games begin to develop more but a great technique to know nonetheless. Great article and love your writing style.