Flashless Animation

20 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Mircea Piturca

    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.

  2. Kev Adamson

    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?

  3. Rachel Nabors

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

  4. Rajveer Rathore

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

  5. Steve Killen

    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.

  6. Chad

    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.

  7. Deano

    Hi Rachel, Great article love the animations! I’m pretty new to animated spritesheets I am currently making a game and having a hell of a time with my spritesheet, my character moves to slightly even though I know the character is in the correct place. I have a question is there any reason why the next sprite in the animation goes below the previous animation instead of being to the right of it?

    Cheers,

    Deano

  8. Hawk

    I’m impressed at what can be done with CSS nowadays – without any frameworks and not that much code.

    Unfortunately, the final example is not working for me. The frames must not be offset correctly because it looks sort of like old film tape. This screenshot explains it better: http://i.imgur.com/z0uaE.png

    I am using Safari 5.1.7 on OS X 10.6.8.

  9. Mike D

    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!

  10. Stepan

    How many HTTP requests do you need to have this running? What is the overall size of files and their synchronization? How easy is it for you to change something or add something a week after the animation is done and released? How long does it take to create the animation in general? Do you need complex battery draining animation on your unplugged device?

    Most of those answers would be in favor of flash, which is on (as stated in comments above) most computers worldwide. ROI (or value, you get for your time spent on a project) for HTML5/CSS3 is very bad and makes it possible only for some very easy non-reusable tasks and animations.

    Anyway, the cat drawing is nice .. :)

  11. yahann

    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.

  12. Awesome work!

    Kudos for helping pushing the limits of CSS3 into what I believe it’s going to be a reborn of fast & efficient web animation…

  13. Jon Livingston

    Great article and detail on flashless animation. While I haven’t done animations in the past I could see using this in subtle ways for specific projects. Very interesting. Thanks for putting this together.

  14. Kev Adamson

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

  15. Mahmoud

    @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 :)

  16. Matt Johnston

    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.

  17. Rachel Nabors

    For people having trouble viewing on mobile and the odd browser, I’m banking that has to do with Prefixfree, which uses JavaScript to re-write the CSS w/ appropriate syntax prefixes into the document head. It’s not perfected yet, but it kept the markup clean for demo purposes.

    For production, I recommend using Compass and Sass to precompile all of your animation styles.

    This can definitely be done right on mobile. It just requires more finess than I had time for. Maybe next year there will be a “cartoons for mobile devices with HTML5 and CSS3” article!

  18. mparaiso

    @KEV ADAMSON
    I have a solution for you : dont use half-backed techs like CSS animations. While CSS transforms are great ( and some browsers support GPU acceleration for CSS transforms ). CSS animation is a joke, a standard one , but unusable.

    Adobe Edge tries to do too much things at once and it does it the wrong way , so it is not a solution , neither.

    The solution is simple :
    - on desktop , flash is still at a 95 penetration rate , there is no reason not to use it. The alternative is a slow , heavy hard to work with , CPU hog , CSS animation standard.

    - on tablets , either provide a simple image as a fallback , or a video , if the the stuff is animation heavy ( but no interactivity … ).

    -on mobile : dont bother …

    HTML5 did not kill and will not kill flash. People still use it , and dont give a damn about the tech used. You just need to explain your clients that different devices means different experiences.

    If you are on Mac , you can test Hype instead of Adobe Edge ,i’m working on a HTML5 animation product focused on optimisation an performance too, and it will be a webapp.

Impress us

Be friendly / use Textile