Web Animation In the Post-Flash Era

• Animation, Post-Flash

10 min. (2080 words)

web-animation-in-the-post-flash-era

In this fiercely competitive environment, companies are frantically looking for ways to capture and retain people’s attention. As we go about our daily lives, the endless stream of visual stimulation gushing at us from animated ads on the street, videos on our mobiles, not to mention our social media feeds, creates a sense of constant movement that is vying for our attention.

The split-second reaction to movement in our environment was developed out of the need to survive and triggered by environmental stimuli perceived as potentially threatening or harmful; people pay extra attention to things that move. As we catch something moving fast out of the corner of our eye, the brain alerts us in a split-second because our subconscious brain has already reacted to the danger before our conscious mind has had time to process the information.

Advertisers know this, and it is why we have animated street advertisements at bus stops and on subway platforms, video ads popping up in social media streams, and electronic billboards with full-motion video. The technique is a one-two punch effect designed to deliver marketing messages. First, by capturing our attention, and second, using video and animation to get the message across.

If a static picture is worth a thousand words, how much is an animation worth?

This is where web animation comes in. Web designers are hoping to capture and hold our attention, and maybe add an unexpected jolt of delight. Web animation can be used to visualize various steps in a complex process or idea, to illustrate a simple marketing message, or to move things on a web page in a natural and fluid way as people scroll—again, to draw attention to something.

Web animation without Flash.
A landing page with motion and web animation (by Mason Yarnell for Mixpanel).

How Web Animation Got Started, the Rise of GIFs

During the early days of the World Wide Web, things were rather static and boring. Webpages were mostly based on graphic design and layouts from the print world. However, some designers made a concerted effort—despite the technical and bandwidth challenges—to include early forms of web animation in order to make them more dynamic and attractive. One of the first additions of a GIF animation to a website was on Jeffrey Zeldman’s Batman Forever in 1995. Visitors were greeted by Batman’s flight towards them, animated as a picture sequence.

The Batman Forever promo site was one of the most popular sites at the time. It inspired other web designers and developers to incorporate GIF web animation as a quirky, eye-catching element into their websites.

The first web animation was a GIF animation on a website for Batman Forever in 1995.

Fast-forward 20 years and animated GIFs are now everywhere. They’re on Twitter, Messenger, iMessage, WhatsApp, Skype, Instagram, and Facebook. GIFs are suitable for short loop animations, image sequences, and even short video loops. An unfortunate shortcoming though is that the GIF file format doesn’t have variable transparency and doesn’t support an alpha channel; therefore, all pixels are either fully opaque or completely transparent.

GIF animations were the beginning of a renaissance in web design, but they were not ideal. Especially back in the early days of dial-up and slow internet speeds, GIFs were bandwidth hogs. The result was a low-resolution, pixelated sequence. The drawback for designers having to compress GIFs to the smallest possible size was a limited 8-bit palette, which resulted in a lot of dithering. This changed with high-speed internet becoming more commonplace in the 21st Century, and as a consequence, web animation became better looking with millions of colors, and smoother with higher frame-rates.

Snowglobe Elvis was one of the early animated GIFs web animations without Flash.

The Dawn of Flash Web Animation

The big web animation boom came with the introduction of Flash in 1996 when Macromedia announced their web plugin and accompanying frame-based animation tool: Macromedia Flash (after they acquired FutureSplash Animator, a vector animation program). Flash played a leading role in bringing new capabilities to the web. From audio and animation to interactivity and video, Flash helped to push the internet forward.

The opportunity to build simple, lean, vector-based web animations across entire sites that included interactions, created what could be called web design’s “baroque” period with (too) many animated elements crowding the landscape. Nevertheless, Flash offered a glimpse into the possibilities of dynamic web design, freeing up designers to experiment and unleashing a period of rapid web design evolution.

Flash animations are lightweight and relatively easy to make. Only a few kilobytes in size, they are distributed in SWF file format and a file using sound with crisp vector graphics. Creating web animations became a streamlined process that didn’t add much to webpage load times. But for all that a significant drawback remained—a browser plugin was required for it to run.

Web animation with Macromedia Flash in the 1990s.
The Flash animation software tool with layers and a timeline-based interface.

Additionally, sophisticated interaction in Flash was enabled by ActionScript (AS), an object-oriented programming language similar to JavaScript. ActionScript was initially designed to control simple 2D vector animations but subsequently evolved into a sophisticated tool.

Unfortunately, Flash animation wasn’t intended to be responsive, didn’t function well on all devices, and was eventually dropped from all popular mobile devices. While the file size was relatively small, Flash was not well-optimized and ended up CPU hungry, which was a problem on mobiles as well. The end of the Flash era came after Steve Jobs decided not to support Flash on Apple mobile devices.

Flash was created during the PC era—for PCs and mice. But the mobile era is about low power devices, touch interfaces, and open web standards—all areas where Flash falls short.

Steve Jobs

Flash web animation.
A web animation created in Adobe Flash.

Web Animation Today

Today, as Flash is obsolete, we have different needs for web animation. Tools must be flexible and light. Web designers must create responsive and adaptable content for different devices (desktop, tablet, and mobile), taking into account various screen dimensions, browsers, aspect ratios, pixel densities, and more. Our web animation masterpieces have to work on a 5-inch, 720px mobile through to a 9.7-inch QXGA tablet, to a 32-inch Retina 6K display.

Technology has matured to a point where even underpowered mobile devices have the bandwidth and processing power to handle very demanding web animations and high-resolution video content. This doesn’t mean websites should be super “busy.” As always, it’s about striking the right balance between the animation, dynamic interaction, and static elements. The fact that we can implement a lot of fancy web animation today doesn’t mean that we should.

Web designers/animators must also consider cross-platform support. Ten years ago, designers did not have to make sure that their creations would look good on such a wide range of devices. Different aspect ratios, portrait, and landscape orientations, as well as various pixel densities and viewing distances have to be taken into account. This conundrum presents web designers with a set of new challenges and potential pitfalls. User testing consumes precious time, more things could go wrong on a multitude of platforms, and web animations have to be more detailed than ever.

HTML5, CSS3, JavaScript, and SVG (scalable graphics) seem to be the best solutions for web animation. Using these modern web technologies and languages will help tackle most, but not all, of the above problems. But it’s always a good idea to tread carefully, especially when in uncharted territory, and extensive QA and testing is a must.

Ikea logo animation using web animation techniques.

Why Use Web Animation?

Web animation can engage and hold people’s attention longer than a static web page and communicates an idea or concept more clearly and effectively. Excellent web animation conveys a story behind every bit of movement. It’s all about bringing an animation to life with meaning and “soul” (lat. anima).

Web animation should be smooth, meaningful, and support the visitor’s journey. The web designer/animator needs to be aware of how the animation fits into the user experience, try to predict likely user flows, and then support it in a meaningful way.

Web designers mustn’t look at web animation from a purely technical perspective; they need to look at it from the user’s perspective.

One of the essential things about animation is timing. Proper timing gives physical and emotional meaning to an animation. The experience should be seamless and logical. If the animation is not fluid (has a timing problem), people could perceive it as a bug and lose all motivation to explore the website further.

The animator needs to use appropriate timing to provide the intended effect. How many keyframes should be used in the animation? What kind of dynamic change in the animation is due to visitor interaction, and how fast does the response come after the interaction? Is the animation whimsical, serious, entertaining?

From a logical point of view, we can divide web animation into two basic types:

  • A static, non-interactive web animation, for example, a GIF animation.
  • A dynamic web animation with user engagement and interactivity that changes on user input.
Google web animation without Flash.

The best example of dynamic animation is a game, where users manipulate the on-screen content. Another simple example would be changing the position of certain elements as a website visitor scrolls through a parallax-scrolling website. The animation is not passive, it varies depending on user actions.

Dynamic web animation is often used to present animated infographics on a website, so people pay more attention to specific areas while scrolling the page—it’s a powerful way to highlight relevant information.

The Pros and Cons of Web Animation

Here are some pros and cons of web animation techniques, including legacy solutions that are no longer in use.

Technique Pros Cons
GIF It is simple and available to everyone. No browser plugin required. It enables picture sequence animation, It can be video-like. The size of animated gif files can be huge. Opacity control is non-existent, there is no alpha channel. It has low compression. It can be pixelated.
APNG Supports alpha channel. Not supported in most web browsers.
Flash The exported swf file can be quite small. It’s fast, can be interactive, and it uses vector animation. No longer supported on most platforms.
HTML/ CSS3 Simple and easy to learn. Good for transitions and transformations. HTML/CSS3 animations run well on mobile devices. It allows vector or pixel animation. Can also manipulate scalable vector graphics (SVG). Not all SVG properties can be animated with CSS. It has limited possibilities for animation and often requires use of JavaScript or a SMIL. It cannot respond to new inputs or a changing environment (dynamic animation).
SMIL It’s compact and capable of animating properties that CSS can’t handle. Preserves SVG when embedded as an image. Not supported in all browsers.
JavaScript Makes web animation easy when using an SVG animation library that generates an image sequence (.png sequence) Doesn’t preserve SVG when embedded as an image.
Web animation without Flash.

What about the pros and cons of web animation in general? Well-executed web animation can still look out of place, so it’s always a good idea to ask some crucial questions (as well as quiz clients and other team members) before proceeding to integrate animation into a website’s design.

First, we need to check how the animation will affect the user experience. Will it improve the website’s UX? Designers ought to:

  • Examine the existing website design (if available)
  • Check the target audience and the hardware platforms they use
  • Check the site load times and CPU load
  • Explore other alternatives
  • Keep an eye on usability

It’s not a good idea to use web animation on a site to simply follow trends.

The decision to use web animation should be treated as any other design decision; web designers must weigh the pros and cons and make sure that the user experience is not compromised. They should also work with developers to ascertain code requirements and ensure they won’t get stuck with inefficient code that may have to be tweaked down the road.

Modern web animation technology has matured significantly in the last 20 years—performance, available bandwidth, and rendering quality have increased. However, designers should tread carefully and only add animation to a website if it meaningfully enhances the user experience.

• • •

Further reading on the Toptal Design Blog:

147 comments

  1. My brother suggested I would possibly like this blog.
    He used to be entirely right. This publish actually made my day.
    You can not believe simply how much time I had spent for this info!
    Thanks!

  2. Nice post. I used to be checking constantly this weblog and I am inspired!
    Extremely useful info specifically the ultimate section :
    ) I care for such information much. I was looking for this certain information for a long time.

    Thanks and good luck.

  7. Heya this is somewhat of off topic but I was wondering
    if blogs use WYSIWYG editors or if you have to
    manually code with HTML. I’m starting a blog soon but
    have no coding skills so I wanted to get guidance from someone
    with experience. Any help would be enormously
    appreciated!

    My homepage :: Kelli

  8. I’ve been exploring for a bit for any high quality articles or weblog
    posts in this sort of house . Exploring in Yahoo I
    finally stumbled upon this web site. Reading this information So i’m glad to exhibit
    that I have a very just right uncanny feeling I discovered exactly what I
    needed. I such a lot indubitably will make sure to do not forget this web site and provides it a look regularly.

    My website – http://www.stwx.net

  9. hello there and thank you for your information ? I’ve certainly picked up anything new from right here.
    I did however expertise several technical issues
    using this website, since I experienced to reload the site a lot of
    times previous to I could get it to load properly.
    I had been wondering if your web hosting is OK? Not that I am complaining, but slow loading instances times will often affect your placement in google and could damage your high-quality score if advertising and marketing with Adwords.
    Well I’m adding this RSS to my e-mail and could look out
    for much more of your respective intriguing content. Ensure that you update this again soon.

    Also visit my page – http://www.tjml.top

  11. With havin so much content and articles do you ever run into any issues of plagorism
    or copyright violation? My site has a lot of completely
    unique content I’ve either authored myself or
    outsourced but it seems a lot of it is popping it up all over the internet without my
    agreement. Do you know any techniques to help protect against content from being stolen? I’d really appreciate it.

    Review my web blog mega688

  17. Wow! This blog looks just like my old one!
    It’s on a totally different topic but it has pretty much the same layout and design. Outstanding choice
    of colors!

  19. When I initially left a comment I appear to have clicked the -Notify me when new comments are
    added- checkbox and from now on whenever a comment is added I get 4 emails with the exact same comment.
    There has to be a means you are able to remove me from that service?
    Appreciate it!

    Check out my homepage :: jmjtime.phpfoxtheme.com

  21. When someone writes an piece of writing he/she retains
    the thought of a user in his/her mind that how a
    user can know it. Therefore that’s why this article is great.
    Thanks!

    Feel free to surf to my website – Lucille

  24. Pretty nice post. I simply stumbled upon your weblog and wished to mention that
    I’ve truly loved browsing your weblog posts.
    In any case I’ll be subscribing for your rss feed and I am hoping you write again soon!

    Also visit my homepage: pansionat.com.ru

  25. Hola! I’ve been following your blog for a while now and finally got the bravery to go ahead and give you a shout out from Huffman Texas!
    Just wanted to say keep up the excellent work!

    Also visit my webpage; xajm168.com

  29. Hey this is kinda of off topic but I was wondering if blogs use WYSIWYG editors or
    if you have to manually code with HTML. I’m starting a blog soon but have no coding expertise so I wanted to get advice from someone with experience.

    Any help would be enormously appreciated!

    Feel free to surf to my homepage :: frun-test.sakura.ne.jp

  31. Neat blog! Is your theme custom made or did you download it from somewhere?
    A theme like yours with a few simple adjustements would really make my blog
    jump out. Please let me know where you got your design. Bless
    you

    my webpage: http://www.aniene.net

  34. After I initially commented I seem to have clicked on the -Notify me when new comments are added- checkbox and now whenever a comment is added I receive four
    emails with the same comment. Perhaps there is a way you
    can remove me from that service? Many thanks!

    my web page … http://www.aniene.net/

  35. I really love your site.. Great colors & theme. Did you create this
    website yourself? Please reply back as I?m hoping to create
    my own blog and would love to know where you got this from or just what the theme is called.
    Cheers!

    Look at my homepage mpc-install.com

  36. I like what you guys are up also. Such clever work and reporting!
    Carry on the excellent works guys I’ve incorporated you guys to
    my blogroll. I think it’ll improve the value of my website :).

    Also visit my site :: Clyde

  39. Simply want to say your article is as surprising. The clarity in your post is simply great and i can assume
    you’re an expert on this subject. Fine with your permission let
    me to grab your RSS feed to keep updated with forthcoming post.
    Thanks a million and please carry on the rewarding work.

    Feel free to surf to my web blog :: http://www.dzzksd.com

  42. Excellent weblog right here! Also your site lots up fast!
    What web host are you the use of? Can I get your affiliate link
    in your host? I wish my site loaded up as fast as yours lol

    Here is my website chengdian.cc

  43. Excellent goods from you, man. I’ve understand your stuff previous to and you’re just extremely magnificent.

    I really like what you have acquired here, really like what you are stating and the
    way in which you say it. You make it entertaining and you still take care of to keep it
    wise. I can not wait to read far more from you. This is really a tremendous web site.

    Here is my web page :: http://www.fles.hlc.edu.tw/userinfo.php?uid=831376

  46. Appreciating the dedication you put into your blog and in depth
    information you present. It’s great to come across a
    blog every once in a while that isn’t the same out of date rehashed information. Wonderful read!
    I’ve saved your site and I’m adding your RSS feeds
    to my Google account.

    my webpage :: mpc-install.com

  51. I think that is one of the so much vital info for me.
    And i am glad studying your article. However want to remark on few normal
    things, The web site style is ideal, the articles is
    in point of fact excellent : D. Good job, cheers

  53. Whoa! This blog looks just like my old one! It’s on a entirely different subject but it
    has pretty much the same page layout and design. Excellent choice
    of colors!

    Here is my site – kebe.top

  57. I together with my guys have already been checking out the best tactics
    on your web blog and so all of the sudden got an awful feeling I never expressed respect to the web blog owner for those tips.

    The young boys were for this reason very interested to
    read through them and have honestly been using them.

    Appreciation for turning out to be considerably considerate and
    for opting for certain perfect issues most people are really eager to
    understand about. My sincere apologies for not expressing appreciation to
    you earlier.

    my page :: http://www.lubertsi.net

  66. Its like you read my mind! You appear to know so much
    about this, like you wrote the book in it or something.
    I think that you could do with some pics to drive the message home a
    little bit, but other than that, this is great blog.
    A fantastic read. I’ll definitely be back.

    Feel free to visit my page kebe.top

  73. Pretty nice post. I just stumbled upon your weblog and wished to say that I have really enjoyed surfing around your blog posts.
    In any case I will be subscribing to your rss feed and I hope you write again very soon!

    Here is my page … mpc-install.com

  74. I really love your site.. Pleasant colors & theme. Did you make this website yourself?
    Please reply back as I?m trying to create my own website and want to know where you got this from or just what the theme is called.
    Thanks!

    Also visit my web site; anapa-alrosa.com.ru

  83. Oh my goodness! Amazing article dude! Thank you, However I am experiencing troubles with your RSS.
    I don?t understand the reason why I am unable to
    join it. Is there anybody having similar RSS problems?
    Anyone that knows the solution can you kindly respond? Thanks!!

    Check out my web page – http://www.goldenanapa.ru/modules.php?name=Your_Account&op=userinfo&username=SanfordAsa

  84. Нi, i read your blog occasonally аnd i
    own a similar one and i was just wondering iff you gett
    a lot of spam feedback? If soo how ɗo yoou stoρ it, any ⲣlugin or anything you can aԀvіse?
    I get so mᥙch latеly it’s driving me mad
    so any help is very mսch appreciateԁ.

  87. I enjoy you because of all of your labor on this website.

    My mom delights in doing investigation and it is easy to understand why.
    My spouse and i hear all regarding the lively means you produce powerful things by means
    of the blog and as well as increase contribution from some other people on this matter so our favorite child
    is in fact becoming educated a lot. Take advantage of the remaining portion of the year.
    You are doing a brilliant job.[X-N-E-W-L-I-N-S-P-I-N-X]I’m
    really inspired with your writing abilities as smartly as with the format in your blog.
    Is that this a paid theme or did you customize it yourself?
    Anyway keep up the excellent high quality writing,
    it is uncommon to see a great weblog like this one today.

    my page: http://pansionat.com.ru/

  89. I’ve been exploring for a little bit for any high-quality articles
    or weblog posts on this sort of house . Exploring in Yahoo I ultimately stumbled upon this site.

    Reading this info So i’m satisfied to show that I have an incredibly good uncanny feeling I discovered exactly what I
    needed. I most no doubt will make certain to don’t omit this web site and provides
    it a glance on a continuing basis.

    Here is my blog Eloy

  92. An impressive share! I’ve just forwarded this onto a colleague who had been conducting
    a little homework on this. And he in fact ordered me dinner
    because I discovered it for him… lol. So let me reword this….
    Thank YOU for the meal!! But yeah, thanx for spending some time to talk about this
    matter here on your web site.

    Feel free to visit my blog post: anapa-alrosa.com.ru

  94. Magnificent beat ! I would like to apprentice at the same time
    as you amend your site, how could i subscribe for
    a blog site? The account helped me a applicable deal.
    I were a little bit acquainted of this your broadcast offered vibrant
    transparent idea

    My web-site … Boltz Pro

  100. Hello, I believe your blog might be having web browser compatibility issues.
    Whenever I look at your web site in Safari, it looks fine however, when opening
    in IE, it’s got some overlapping issues. I simply wanted to give you a quick heads up!
    Other than that, excellent website!

    my blog :: Metabo Fix

  101. Magnificent beat ! I would like to apprentice even as you
    amend your website, how can i subscribe for a weblog website?

    The account aided me a acceptable deal. I were tiny bit familiar of this your broadcast provided vivid transparent idea

    my web-site – Boltz Pro

  104. Great work! That is the kind of info that are meant to be shared across the web.
    Shame on the seek engines for no longer positioning this
    submit higher! Come on over and discuss with my
    web site . Thanks =)

    Feel free to visit my homepage :: BreezeTech

  106. Nice blog right here! Additionally your web site loads up fast!
    What host are you using? Can I get your affiliate link for your host?
    I wish my website loaded up as fast as yours lol

    My blog – Breeze Tec

  107. I really like your blog.. very nice colors & theme. Did you
    design this website yourself or did you hire someone to do it for you?

    Plz reply as I’m looking to create my own blog and would like to find out where u got this from.
    appreciate it

    Take a look at my site … Tri-Bol Testo

  108. Pretty section of content. I just stumbled upon your weblog and in accession capital to assert that I acquire in fact enjoyed account your blog posts.
    Any way I will be subscribing to your feeds and even I achievement you access consistently quickly.

    Feel free to surf to my blog Tri-Bol Testo Review

  112. Good – I should definitely pronounce, impressed with your web site.
    I had no trouble navigating through all tabs and related information ended up being truly easy to do to access.
    I recently found what I hoped for before you know it in the
    least. Reasonably unusual. Is likely to appreciate it for those
    who add forums or something, web site theme . a tones way for your client
    to communicate. Nice task.

    my webpage – Dream Lift Skin

  117. We wish to thank you all over again for the beautiful ideas you offered
    Jesse when preparing a post-graduate research as well as, most importantly, pertaining to
    providing all of the ideas in a blog post. If we had known of
    your website a year ago, we might have been kept from the
    unnecessary measures we were selecting. Thank
    you very much.

    Visit my web page; Mega Arise Max Reviews

  120. Yesterday, while I was at work, my cousin stole my iPad and
    tested to see if it can survive a thirty foot drop, just so she can be
    a youtube sensation. My iPad is now destroyed and she has 83 views.

    I know this is completely off topic but I had to share it with someone!

    Here is my page Nitro Strive

  123. Thanks for sharing excellent informations.
    Your web site is very cool. I am impressed by the details
    that you have on this web site. It reveals how nicely
    you understand this subject. Bookmarked this web page, will
    come back for extra articles. You, my pal, ROCK!
    I found simply the info I already searched everywhere and
    simply couldn’t come across. What a perfect web-site.

    Feel free to visit my homepage; Wallace

  131. Do you have a spam issue on this blog; I also am a blogger,
    and I was wanting to know your situation; many of us have
    created some nice practices and we are looking to exchange solutions with other folks, please shoot me
    an email if interested.

    Check out my web-site … Blosum CBD Gummies

  141. Thank you for your blog post. Thomas and I are already saving to buy a
    new guide on this issue and your short article
    has made us to save our own money. Your thoughts really clarified all our issues.
    In fact, a lot more than what we had known in advance of
    the time we came across your excellent blog. My partner and i no
    longer nurture doubts including a troubled mind because you have attended to each of
    our needs in this post. Thanks

    Also visit my web page … 163.30.42.16

  143. Wonderful work! This is the type of info that should be
    shared across the internet. Disgrace on the search engines for no longer positioning
    this publish upper! Come on over and talk over with my website .
    Thank you =)

    Also visit my blog post … male orgasm

  144. I don’t know whether it’s just me or if perhaps everyone else encountering problems with your site.

    It appears as though some of the text on your content
    are running off the screen. Can somebody else please provide feedback and let me know if this is happening to them too?
    This could be a problem with my web browser because I’ve had this happen before.
    Thank you

    my web site: 163.30.42.16

  146. Hello there! This blog post could not be written any better!
    Looking at this article reminds me of my previous roommate!

    He continually kept preaching about this. I most certainly will
    forward this information to him. Pretty sure he’ll have
    a very good read. Thank you for sharing!

    Have a look at my site; try hemp

Leave a Reply

Your email address will not be published.