Introducing Project Moda

With the demise of Flash, we wondered if we could achieve the same level of animation polish using HTML5 technologies. So we took it to the Lab.

Project Moda was our answer.

Project Moda is a new animation design application conceived and built by our Lead Front End Developer Dave Wallin as part of The Archer Labs program. It allows users to create beautiful, fluid HTML5 / SVG based animations without having to touch a line of code.

For us, Project Moda was a critical solution to a real business problem. At The Archer Group we produce hundreds of animated banners each year. And with the industry moving away from Flash, we wanted to develop our own tool that would allow our animators to create complex animations with a visual editor, without requiring they be developers. We evaluated HTML5 animation tools like Adobe Edge and Hype and while they can get the job done, we found them lacking in different ways in terms of workflow, interface, and capabilities.

Project Moda is one of the few animation tools specializing in working with SVG. The advantage of the SVG graphics format is that it offers almost all of the capabilities offered by Flash — vectors, masks, filters, images, text and hierarchical grouping of elements — and can be controlled and animated with Javascript, which enables the creation of rich interactive experiences. Best of all SVG is well supported in all modern browsers and mobile devices.

With Project Moda, we can take any SVG file (created in a tool such as Adobe Illustrator) and then animate it using familiar timeline and keyframe-based methods. Project Moda supports everything you’d expect in a high-quality animation program: easing, Bezier paths, real-time previews, and smooth non-frame-based animations. It also allows the user to save animation presets and templates to help save time. Because it’s based on Electron and Chromium, the in-app preview reflects exactly what you would see in the Chrome browser.

Thanks to Project Moda, and Archer Labs, we look forward to a seamless transition away from Flash, with no compromise in the quality or efficiency of our work.

Check out example animations below!

Archer Labs is a company-sponsored, free-play environment for our employees to explore technologies that interest, amuse, or baffle, them. If someone here wonders if something can be done, we bring it to the Lab.