August 24, 2018

A visual tool for creating fast interactive SVG animations for HTML5

It has been a long time since we have posted in our blog — and for good reason. We were focused entirely on working on a revolutionary new software product. And now we have something to surprise you!

We have developed a visual tool for creating SVG animations. No matter how loud it sounds, it really is a kind of Flash alternative, for HTML5.

We are sure you haven't heard of anything like that. Keep reading and you will be even more surprised how cool it is, how it works and how easy it is to use.

So... meet Aphalina HTML5 Animation Maker



This banner, of course, was created in our Animation Maker. Using Animation Maker you can draw:
  • HTML5 SVG animations
  • Animated banners
  • Icons
  • Sliders
  • Interactive web pages
  • Infographics
Animation Maker is compatible with Grapholite, that means you can import your images created in Grapholite and make them dynamic, interactive and embed in any web page.

Drawing is more efficient and easier than coding


Even though it seems reasonable to draw animations, not to code, a common practice now is to write HTML, SVG and JavaScript code manually using high-performance animation library such as GSAP. This is due to lack of convenient tools that can produce clean code and really fast animations working across all devices and browsers. And that is exactly what's under the hood of our new product.

The motto of Aphalina Animation Maker is "Animation should be drawn, not coded!". It is no exaggeration to say, that you can save thousands of developer hours using this approach.

You can click on image to enlarge


Some of Aphalina Animation Maker's technical details


To understand the revolutionary nature of our product, you need to know the following three things:
  1. It creates true resolution independent SVG-based animations that look crisp on all types of displays including ultra high DPI/Retina, no matter what zoom factor is used in browser.
  2. As far as we know Aphalina Animation Maker is the first general purpose animation tool that generates GSAP (GreenSock animation Platform) code for animated SVG drawings.
  3. As a result of the program you get a clean, compact, and human-readable JS/SVG/HTML output. It is easy to read, understand, debug and modify as if it was written by a human. It is embedded in single HTML file. The only external dependency is GSAP library from official CDN. The result can be used as a standalone html page or included in a web page using iframe. Additionally you can save the result as animated GIF or a video file.

Some features and highlights:

  • Scenes: a project organized as a series of scenes
  • Timelines: unlimited number of timelines per scene, full control of timelines playback from element events (click, mouseover, etc)
  • Keyframes: sophisticated timeline editor with control key frames for every property
  • Transforms: independent transform and opacity animations for a group and its elements: unlimited nested elements — unlimited possibilities!
  • Actions: triggered on shape events
  • Clip: any geometric shape can be used as a clip. Both clip shape and clipped content can be animated in any way.
  • Motion path, Sequences, Hand-drawing effect, Sprites and much more! Look at the following examples.




More examples you can find in our gallery.


Download Animation Maker


Aphalina Animation Maker is available in 2 editions:


1. Aphalina Animator PRO: classic desktop program for PC (Windows 7, 8, 10)

Click on image to download desktop version

2. Aphalina Animator TOUCH: a special Windows Store edition based on native UWP libraries, latest Win2D technology and fully optimized for pen and touch

Click on image to download application from Windows Store

Write us a feedback!

Since it’s the initial release, we have implemented only a small fraction of the planned features. Please let us know what missed features are most critical for your work and we will try to implement them first. Please, send us e-mail to support@aphalina.com.

More on Aphalina Animation Maker: https://aphalina.com/

2 comments:

  1. "Insightful" is the perfect word to describe this wonderful writing of yours. The artistic blend of this subject with your tone of writing made this a great read. Much love 😘.
    How to bottom

    ReplyDelete