• Price: Free (for a limited time) . Creative Cloud from £39 plus VAT

  • Company: Adobe

  • Pros: Free (for now); supports HTML; CSS and JavaScript; intuitive tools

  • Cons: No audio; coding needed for sophisticated interactivity

  • Our Rating: We rate this 8 out of 10 We rate this 8 out of 10

Edge Animate’s interface will be familiar to anyone with experience of time-based multimedia. There’s a WebKit-based Stage area for assembling/creating graphics (Svg, Jpeg, Png and Gifs) and text elements, and previewing animation and HTML, and there’s a Timeline and a Properties panel, all presented in the usual Adobe UI.

Animation is carried out via keyframes, with an auto-keyframe stopwatch to automatically tween values when changes to elements on the stage take place over time. You can also use the Pin tool to animate. This pins or fixes the properties values at a certain point on the timeline, allowing you to move the playhead and change the element properties.

In this way, it creates keyframes from the Pin to the playhead in a single edit. In another shortcut, you can copy the animation from one element and paste it onto another. You can thus quickly build up a sequence of animated elements such as a fading slideshow of images. An easing button allows you to smooth the in or out motion of the animation.

You can also group a collection of elements, together with their animation timeline, into one reusable Symbol. This lets you have objects with internal animation, animated as part of a larger sequence. Playhead commands can be applied to start Symbols running forwards or in reverse at a certain point on the timeline.

Pull the trigger

Triggers are another set of functions that are called into operation to tell the timeline what to do, such as Stop. These are quickly applied via a code pop-up, which offers prewritten lines of code. Elements in the work area can also have functions called actions applied to them in response to a mouse-click, touch (for tablets and mobiles) or trigger/timeline event. In addition, a separate Code window offers a view of all the actions and Timeline triggers for easier management. There’s also strong output support, packaging the animation using a JSON structure to ease uploading to websites, digital publishing applications or for embedding in iBooks.

Edge Animate’s workflow, particularly the Pin and Easing tools, as well as hidden gems like cut and paste functions, makes for effective and free HTML 5 animation creation. However, there’s no audio support and ‘no-coding’ designers may be put off by the (admittedly minimal) use of Code pop-ups and the Code window.