Edge Animate is a tool in Adobe's Creative Cloud that enables you to quickly produce HTML5 animations to use across mobile, the web or desktop. Here are 10 things you need to know about this cool tool.
Edge Animate CC is the perfect tool for the designer wanting to create slick animated HTML5 content. It fits into your Creative Cloud workflow beautifully: create your assets in Illustrator or Photoshop, import and start animating. If you’re familiar with After Effects, you can get going straight away with Edge Animate. Here's 10 things you need to know about this oft-overlooked tool...
01. Creative Cloud integration
Edge Animate CC integrates perfectly with the Creative Cloud tools. You can easily export graphics from Illustrator as SVG files to save on file size, or of course as PNG or JPEGs from Photoshop or Illustrator. You can also drag and drop files onto the Edge Animate stage.
02. Templates
To improve workflow further, you can save custom templates for quick access to reusable assets – saving you a huge amount of time when you’re working on many similar projects.
03. Precise animation
The timeline in Edge Animate is based on the timeline in After Effects – and thus you get a huge amount of control over your animations. You can, just like in AE, edit property-based keyframes for precise control over movement.
04. Swipe gesture support
Designing for mobile? Well, luckily Edge Animate CC enables you to add left and right swipe events to elements for your projects. It takes the fuss out of coding and provides a simple way to deliver interactive animated content to mobile devices.
05. Motion paths
In Edge Animate CC, you can animate elements along fully customisable motion paths, giving you huge control over the movement of your objects. As in After Effects, you can apply easing functions too. You can also use motion paths in resizable layouts.
06. Reuse those symbols
If you’re familiar with Illustrator, this feature will be a cinch to use. In Edge Animate CC, you can use the symbols feature to create nested animations with independent timelines and interactive capabilities. It makes managing your projects much easier.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
07. Mobile ready
As Adobe says: “Content created with Edge Animate is designed to work reliably on iOS and Android devices, as well as in modern browsers such as Firefox, Chrome, Safari, and Internet Explorer 9+.” You don’t need to worry about your HTML5 content displaying correctly across multiple platforms.
08. OAM ease of use
Using the Edge Animate CC OAM format you can quickly and easily import your Edge Animate CC compositions into the likes of Adobe Muse CC or InDesign CC. No matter what your target platform or device is, Edge Animate CC makes it easy to produce high-quality animated content.
09. Web font services support
Edge Animate CC has Typekit and Edge Web Fonts support built in, so you can add richer typography to your HTML5 projects. You can preview fonts from the Edge Web Fonts service via the web font interface.
10. Create within Edge Animate CC
As well as being able to import from the rest of the tools in Creative Cloud, you can also create directly within Edge Animate CC thanks to its drawing and text tools. And because the tools work in the same way as those in your familiar Creative Cloud apps, there’s no learning curve to master.
