Today we are checking out Hippo Animator, a slick HTML Animation tool from Hippo Studios that brings life to your web pages on all platforms including Internet Explorer 6, 7, 8, 9, Firefox, Chrome, Safari, Opera, iPhone, iPad, Windows Phone and Android.Unlike Flash, Silverlight and Java, Hippo Animator works on smart phones too.
It also works in old browsers like Internet Explorer 6, 7 and 8 where new technologies like HTML5 and CSS3 are not available. No plugins, downloads or scripting knowledge is required.
Movies are small and scalable. Simply create a movie using Hippo Animator’s easy to use editor and export it to HTML, GIF, image or video. Add your movies to a web page using 1 simple line of code or create whole animated web pages that scale to fit any internet browser.
This software is perfect for anybody who is interested in HTML animation, CSS animation, HTML5 animation, SVG animation, Silverlight animation, Flash animation, Java animation, javascript animation, VML animation, canvas animation, banner animation, GIF Animation, image to video, image to avi, web design, graphic design, dynamic HTML, DHTML or any other kind web animation. There are a number of Tutorials on the Hippo Studios Tutorials Page to help guide you through the process of making your own animation, adding audio and exporting to HTML, and you can request a Tutorial if something not available that you wish to know.
Below are some simple animations created using a combination of HTML5, HTML, SVG, VML, CSS3, CSS and Javascript. They were created using Hippo Animator and work in 99.9% of web browsers, including IE6 and smart phones.. Feel free to add them to your website by copy and pasting the code beneath each animation. You can see and use more of these animations for free by visiting the Hippo Studios HTML Animation Gallery.
Check out the shadow effect on this cat and watch how the bulb speeds up as it passes it’s face.
The spider in this HTML Animation uses keyframes to give the impression it’s climbing. It may look complicated in the timeline but it’s simple to achieve. We simply set the start and end positions of the spider, then in the timeline double clicked at intervals along the black transition line to create key frames. Then we could edit each keyframe, in this case making alternate spider frames visible or invisible. This whole animation only took 30 minutes to create. Download the project below for a closer look.
Copy The Code Below and Add This Animation To Your Site <iframe src=”http://www.HippoStudios.co.uk/Download.aspx?LinkType=File&Name=Animations/Forest.html” width=”600″ height=”400″ frameborder=”0″ scrolling=”no”></iframe>This HTML animation demonstrates the use of transparency and opacity. The animation works in Internet Explorer 6 as usual despite it’s lack of support for transparency and rotation. It also works on the iPhone, iPad and Android as well as the usual desktop web browsers.
Copy The Code Below and Add This Animation To Your Site <iframe src=”http://www.HippoStudios.co.uk/Download.aspx?LinkType=File&Name=Animations/Leaves.html” width=”600″ height=”400″ frameborder=”0″ scrolling=”no”></iframe>This HTML animation demonstrates buttons used to control a comic.
Copy The Code Below and Add This Animation To Your Site <iframe src=”http://www.HippoStudios.co.uk/Download.aspx?LinkType=File&Name=Animations/Comic.html” width=”700″ height=”350″ frameborder=”0″ scrolling=”no”></iframe>This Parisian scene uses a number of different blurred images. Hippo animator neatly fades between them to create a depth of field effect.
Copy The Code Below and Add This Animation To Your Site <iframe src=”http://www.HippoStudios.co.uk/Download.aspx?LinkType=File&Name=Animations/Paris.html” width=”600″ height=”400″ frameborder=”0″ scrolling=”no”></iframe>
Designrfix