Create HTML5 animations easily with Edge Animate

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.

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.

Now read these:

What Creative Cloud tools do you use? Tell us in the comments...

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.