9 HTML5 Animation Tools

Here are some amazing HTML5 animation tool that lets you do really amazing things all without Flash. Enjoy !

Google Web Designer

Google has launched Google Web Designer, a new beta app for creating animated online content such as adverts or other moving graphics, all in HTML5. The Windows and Mac app aims to streamline the post-Flash online world with the option of code or graphical animation creation, for those of differing comfort levels with CSS and JavaScript. Although Google intends it to be of primary use to advertisers, the software may well follow GIFs in becoming the platform-to-have for eager Tumblr users and other social addicts.

google-web-designer

Moonbase

Moonbase, the first project of Lodwick’s new company, Elepath, replaces hand coding with a visual editor that enables users to create animations with custom text, images, colors, movements and more. Results vary based on a user’s prowess with the tool, but the founder envisions the service as a fertile spawning ground for memes. Moonbase even has support for sharing animations, and the option to fork existing creations, allowing users to put their own spin on works of art. The service is free in its current state, but Elepath is contemplating charging for tools aimed at pros. Hit the jump for a video of the service in action or click the neighboring source link to give Moonbase a go.

moonbase-1

Purple

With Purple you will be able to import some of your favorite pictures from other applications and choose how you want the content to be laid out. Though the program will of course give you suggestions and transition options. You will be able to view your creations in Purple Moon or on Safari internet browser. And you can also transport your animations made within this program to other applications as well. With Purple, you will create beautiful HTML5 animations with ease. Purple animations can be viewed on mobile devices and on your Desktop.

purple-2

Adobe Edge Animate CC

Adobe has broken out the various functionalities into multiple applications. For example, to develop graphical animations designers and developers use Edge Animate. Adobe also released Edge Code (GUI/Code Hybrid), Edge Reflow (responsive design tool), Edge Inspect (test and view responsive designs) and other useful tools that as a collection provide a lot of assistance in workflow and development of web designs. Each of these applications stand alone as well as can be used in conjunction but serious web developers, including myself, have been slow to migrate to these tools as they are not cohesive and still under major development.

adobe-edge-3

Radi

Radi is a visual design application for Mac OS X. It produces 100% standard and human-readable HTML + JavaScript code. You can take this output and easily place it anywhere that accepts HTML code. This way, animations and interactive web pages designed in Radi can be embedded into anything that uses web technology: web apps, mobile apps with web content, and even HTML5-compatible electronic books like Apple iBooks, Amazon’s Kindle Format 8 and the EPub 3 standard.

radi-4

Tumult Hype

Using Tumult Hype, you can create beautiful HTML5 web content. Interactive content and animations made with Tumult Hype work on desktops, smartphones and iPads. No coding required.

tumut-hype-5

GSAP JS

The GreenSock Animation Platform (GSAP) is the next-generation animations platform for today’s modern web. Developed from the famous TweenLite Flash animation engine, GSAP is the developer’s answer to the new HTML5-driven market.

gsap-js-6

TweenJS

TweenJS is a simple tweening library for use in Javascript. It was developed to integrate well with the EaselJS library, but is not dependent on or specific to it. It supports tweening of both numeric object properties & CSS style properties. The API is simple but very powerful, making it easy to create complex tweens by chaining commands.

tween-7

KineticJS

KineticJS is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

kinetic-8

0 Comments

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.