HTML5 is not a new phenomenon but the use of HTML5 has sky rocketed in the last couple of years. HTML5 has almost completely replaced use of flash when it comes to rich media, motion graphics and interactive content on the web. It has also been adapted heavily by mobile app developers for the shear reason that it is performant, easy to use and open standards compliant.
HTML5 came with many improvements over its predecessor HTML4, and one of those is inclusion of the canvas element, which is used for rendering graphics on the fly, in the web page.
Let us look at the basics of HTML5 animation before moving on to the various tools used to create animated banners, ads, rich interactive content, eCards, Infographics, slideshows, motion graphics, games and much more.
HTML5 Animation – Basics
HTML5 animations are contained in the <canvas></canvas> element. For a basic understanding, canvas in an html document can be considered as a drawing board where you draw the shapes and then change the frames quick enough to make it look like an animated graphic.
The steps to a basic animation are pretty simple and you can create basic animations by writing code manually in HTML5, CSS and JavaScript. Complex animations can be achieved by using HTML5 animation tools that provide drag and drop functionality to create HTML5 shapes and also let you add animations and interactivity.
These tools typically generate human readable code that can be modified, if required, and of course, the code can be included in the HTML documents and run on mobiles, PCs, tablets and smart TVs. Some of these tools include names like Bannersnack, Mugeda, GSAP, Animatron, Edge Animate, HTML5 Maker and Tumult Hype.
Let us look at anatomy of a very basic of animation (just to get a hang of it) post which we will look at various tools used for creating animations using HTML5.
Creating Simple HTML5 Animation
For creating animations, you need the shapes, images, audio, videos in the document and mechanism to control and manipulate all of these the way you want.
Shapes can be drawn using HTML5 methods while images, audio, video etc. can be imported to the document by reference. Control can be brought in by direct methods available in Canvas API, CSS3 elements or by using custom JavaScript functions.
Let us look at setup of the canvas, which is a simple four step process –
The first step is to clear the whole canvas so that you get a blank slate. You can do this by using the clearRect() method. The second step is to save the canvas state, this is important because after making the changes etc. you would want to go back to the original state.
The third step is the good part and this is where you will draw animated shapes and create frames for your animation. The fourth step is to save the frame state, and the cycle continues – you go back to the original state, draw the next frame and save it.
Shapes are drawn by using canvas methods like rect(), fillRect(), fillStyle() and drawImage() etc. directly or by creating and calling custom JavaScript functions. Like I said before, images, audio and video can be included and positioned in space and time by using many other methods so that you have everything that you need to use for creating animations.
For animations, we need to call canvas states (saved during drawing) and render distinct frames over a period of time, and to do so, there are three JavaScript functions, namely window.setInterval(), window.setTimeout(), and window.requestAnimationFrame(). There are other methods too but we will hold our horses for now. Check out Mozilla developers for understanding the basics of how to draw and animate in the canvas using various methods.
You can also check out Circular Animation to see HTML5 animation in action along with the code, for better understanding of the basics.
If you want to look at some of the most advanced HTML5 interactive animations, then look at the game Free Rider and this mind-blowing HTML5 destruction video.
Let us look at some of the tools used for creating HTML5 animation –
Bannersnack
Bannersnack is one of the best tools in the market when it comes to creating HTML5 banner ads with drag and drop toolset. I personally like Bannersnack for its ease of use and intuitive user interface. Bannersnack is quite popular among users of many fortune 500 companies like Google, Citibank, Hilton, GSK and airbnb and many more.
You can use text, images, audio, buttons and clipart etc. to create great looking banner arts and export your finished files as HTML5, Flash/SWF, MP4, PNG, JPEG, GIF and Flash/HTML5 embed.
The ads created using Bannersnack are compatible with almost all of the major ad networks including Facebook ads and Google AdWords. You can try Bannersnack free before buying it.
Read more about Bannersnack here at – Banner Snack: HTML5 Animation.
HTML5 Maker – With FREE Subscription
HTML5 Maker is another popular online animation tool, with over 100K user, by the company named OnlyMega LLC. It is most used for creating html5 animations, sliders, presentations and slideshows etc. Though HTML5 maker offers commercial subscriptions but it does have a free plan that can be used to create animations and banners etc. for free.
HTML5 Maker comes with tons of ready to use templates. One can pick the template that fits best to the requirements, modify images, logos, texts etc. and save the work on the cloud. Animations can be embedded in the websites, blog or can be shared on social media networks, directly from the cloud.
The animations created with HTML5 work equally brilliant on Mac, PC, iPad, iPhone, Android and many other platforms. What I like about HTML5 Maker is the fact that it is not dependent on any third party libraries and tools, not even on Photoshop for graphics. You can create everything you need right using the editor, including images. You can import your own media files though, as required.
Read more about HTML5 Maker here at – HTML5 Maker
Mugeda
Mugeda platform is online HTML5 authoring tool created and marketed by Mugeda Inc., a company based out of San Francisco with R&D office in China.
Mugeda platform offers a complete solution to build HTML5 rich media that works on all screens including PC, tablets, smart phones and smart TVs. It includes Mugeda studio for drag and drop editing, tools to create mobile optimized MRAID 2.0 complaint rich media ads, built in traffic analytics and JavaScript API for developers.
Mugeda is heavily used for creating HTML5 media ads including banners, expandables, mini games and interstitials. It is also used by teachers for creating interactive content for students. Mugeda is used by companies including Red Bull, Mazda, Sunning, Buick, ANA and many more.
Check out the tool here at – Mugeda- Create Animations
GSAP
GSAP is a commercial product for the enterprises, from the house of GreenSock and the name to reckon with in the world of animations. GreenSock is in the market for last 14 years with customers like Microsoft, Adobe, Samsung, Coca Cola, Ford and many more big names.
With the rise of HTML5 based motion graphics, they launched GSAP for HTML5 which is a very powerful tool and is packed with features to create stunning animations. Few of the core tools of GSAP include TweenLite, TweenMax, TimeLineLite and TimeLineMax.
Check out GSAP here at – GSAP for HTML5
Animatron
Animatron is the big daddy when it comes to HTML5 animations and explainer videos that keep the audience engaged. You can gauge the popularity and power of Animatron by looking at its customer base that includes giants like Google, Facebook, Amazon, Disney, Oracle, Fox, NASA and Dell.
Check out Animatron here at – Animatron
Tumult Hype
Tumult Hype is used to make interactive and professional looking animations that work on web, desktops, laptops, smartphones and IPad and doesn’t require any coding skills.
Tumult Hype works on a keyframe based system where you click record and Tumult starts creating the frames out of your moves in the editor; one can add and remove frames manually, in the beginning, in the end or in-between.
Tumult is heavily used for creating interactive eCards, Infographics, eBooks/ibooks, presentations etc. all using HTML5 animations with the magic of CSS properties and JavaScript in the background.
Read more about Tumult Hype here at – Tumult Hype
Google Web Designer
If you are like me and love products coming straight from the house of Google, then this one is the html5 animation tool for you. Google web designer is still in beta, at the time of writing this article but it works absolutely fine as per my hands on experience with it for last couple of weeks.
Google web designer is used by many for creating simple advertisements that include eye catchy static as well as motion graphics. You can download Google web designer for free and install on windows, Mac or Linux.
Check out more here at – Google Web Designer
CreateJS
CreateJS is a different animal all-together and offers collection of libraries and tools for creating HTML5 based rich interactive content. The libraries it offers include –
- EASELJS – Control and manage HTML5 canvas element
- TWEEENJS – Tween and Animate the web with HTML5 and JavaScript
- SOUNDJS – Let the web hear what they want
- PRELOADJS – Control how you load various assents
CreateJs libraries are used heavily in creating HTML5 based ads. Adobe animate and CreateJS make a killer combo and are used widely by designers in the advertisement industry.
With backing from the likes of Mozilla, Microsoft and Adobe, CreateJs seems to be very promising and we hope to see more features in the future releases.
Read more about CreateJS here at – CreateJS
Hippani
Hippani is a UK based company and the Hippani animator comes with a 30 days free trial for evaluation post which you can purchase its professional plan, if you like. Hippani doesn’t fall in the league of Animatron, BannerSnack, HTML5 maker or Mugeda in terms of popularity but is promising tool that is getting continuous upgrades in the recent past.
Apart from the basic features that most of other tools have, Hippani also comes packed with a javaScript Engine for creating complex interaction and games.
Visit official website for more details – https://www.hippani.com/
Edge Animate CC
Coming from the house of Adobe, Edge Animate CC also has been a used widely for creating HTML5 but it is not getting upgraded since last couple of years, the product, though very popular, might get discontinued in another sometime.
Check out more about Adobe Edge Animate CC here at – Edge Animate CC
Three other good tools that are used for making HTML5 motion graphics include RadiApp, Nodefire and Blysk. All of these are free tools for creating interactive motion graphics and can be tried anytime.
The other great option for creating graphics and animations is SVG. Denoted by the element <svg>, it serves as a container for SVG (Scalable Vector Graphics). SVG has numerous ways to draw circles text, graphic images, lines etc.
Canvas can be used for creating more complex animations, interactive graphics and games that run in the browser. If you are interested in knowing more about the subtle differences of SVG vs Canvas, check out this article here – Canvas vs SVG.
HTML5 Animation – A Brief History
In 1991, Tim Berners-Lee invented the first HTML, which was known as version 1. A relatively raw but potentially helpful language, the first version of HTML was improved over the successive 8 years. The years saw version 2 being available in 1995, version 3 in 1997 and finally version 4 in 1999. Hailed as an innovative and creative language, some limitations were soon becoming clear in HTML4 by 2005. A new improvement was needed and thus the HTML5 came to fruition in 2012.
What’s interesting is that HTML5 supports mobile web devices it has gained popularity rather quickly and is now supported by the majority of the browsers. Coming to advent of HTML5, Steve jobs refused to use Flash in Apple devices including iPhone, iPad, iPod and stated that it is not fit for mobile devices for performance and many other reasons and HTML5 was not built HTML4 was not built to create more interactive websites and was then seen as defunct and inadequate.
Developers at the time were now in agreement that there was a need for an open source standard to build modern websites around which resulted in advent of HTML5. Of course, Apple denial is not the only reason but a solid one for sure.
HTML5 was created out of necessity and was a massive improvement over the 4th version in many aspects and incorporated music and audio tags in the language. There was a bevy of other improvements as well that we will talk about sometime later.
Conclusion
HTML5 has practical implications but is used by many because of its convenience and efficacy. It has turned out to be a godsend replacement for flash based animations. Even the creator of Flash – Adobe, has come up with a fantastic tool for creating HTML5 animations, called Edge Animate CC.
HTML5 is all over the web and mobile devices and is here to stay at least in the foreseeable future. As we saw, there are tons of libraries and tools that make HTML5 animation an absolute breeze.Do share your experience with HTML5 animations with our readers, via comments!
If you like this article, then do not miss to share it on Facebook or Twitter.
