Motion and Interaction Design for HTML5
- Recent Updates
- Aug 20, 2012 — Adobe Edge is now Adobe Edge Animate.
- Preview 7 is here. New features include resizable layouts, rulers and guides, a more precise timeline, and much more.
- Download Edge Animate preview 7 | Watch the Edge Animate preview 7 introduction video
Adobe® Edge Animate is a powerful, intuitive tool for creating stunning animated and interactive content using HTML5, CSS3 and JavaScript. Edge Animate is intuitive and has powerful features that can save time and headaches. Content made with Edge Animate runs gracefully on mobile devices and desktops, expanding your reach on the modern web. Learn more at edge.adobe.com.
For updates from the product team, like Edge Animate on Facebook and follow Edge Animate on Twitter.
Edge Animate Highlights
Intuitive user interface — The features of Edge Animate are centered around a WebKit-based stage, so your compositions have fidelity across modern browsers. Design engaging HTML content with an assortment of styling options and integration with font services like TypeKit.
Animate with precision — Add motion to graphics and HTML elements with amazing accuracy with Edge Animate using the powerful, yet easy-to-use, timeline editor. Edit property-based keyframes and enhanced easing for complete animation control, or leverage the Pin tool to speed up the animation process.
Energize existing HTML — Since Edge Animate works natively with HTML, you can open HTML pages and add motion to them. The animation code generated by Edge Animate is stored in a separate file, so the integrity of the page is preserved.
Extend — Enhance the richness of your work with Edge Animate by handling user interaction and playback control. Use the built-in code snippet library or add your own JavaScript code.
Symbols — Create nested animations with independent timelines and interactive capabilities. Symbols are reusable and can be controlled via exposed APIs and pre-built code snippets.
Mobile-ready content — Content created with Edge Animate is designed to work reliably on iOS and Android devices, and modern desktop browsers such as Firefox, Chrome, Safari, and Internet Explorer 9. Edge Animate also lets you define a fallback state for older browsers.
Visit edge.adobe.com to learn more about Edge Animate
Getting Started
Follow these steps to get started with the Edge Animate preview:
- Watch the Getting Started with Edge Animate video
- See the complete list of updates in Edge Animate preview 7
- Download and install Edge Animate preview 7
- Download and experiment with Edge Animate preview sample files
- Ask questions and share your feedback in the Edge Animate discussion forum
Please note that your submission of comments, ideas, feature requests and techniques on this and other Adobe maintained forums, as well as Adobe's right to use such materials, is governed by the Terms of Use.
Community
Below you'll find references and links to help you participate in the Edge Animate community.
Online Forum
Ask questions and discuss ideas with other users of Edge Animate in the discussion forums. Your participation and feedback are tremendously important to us. We would like to find out what you think of the product, what you think of the output, which new features you'd like to see first, if you find any bugs, or any other feedback you'd like to provide.
Please note that your submission of comments, ideas, feature requests and techniques on this and other Adobe maintained forums, as well as Adobe's right to use such materials, is governed by the Terms of Use.
Adobe Developer Connection
Related Edge Animate Videos
- Introducing Edge Animate Preview 7 — Adobe Fellow Mark Anders demonstrates the latest features in Edge Animate preview 7, such as resizable layouts that let compositions adapt to different screen sizes, enhanced text editing capabilities, and shadow effects. He'll also show you how to use new timeline improvements for newfound precision, keyframe improvements, and more.
Resources
If you want to learn more about releases on Labs as well as other Adobe technologies, visiting a user group or connecting with an Adobe Community Professional is a great place to start.
Product Details
Features
Visit edge.adobe.com for a complete list of features
FAQ
- What is Edge Animate, and what does it do?
- Edge Animate is a new motion and interaction tool that allows designers to bring animated content to the web using HTML5, JavaScript and CSS. It is currently in public preview and is designed to be powerful yet approachable and easy to use. Edge Animate is currently available in the Adobe Creative Cloud™ or as a complimentary download on Adobe Labs.
- How do I get Edge Animate?
- Edge Animate is included in the Adobe Creative Cloud membership, or as a complimentary download on Adobe Labs (an Adobe ID is required).
- What's new in Edge Animate preview 7?
- Edge preview 7 features significant updates for added creative depth, precision, and adaptable compositions — many of which were requested by the community:
- Resizable Layouts — Enable your compositions to adapt to multiple screen sizes.
- Rulers and Guides — Design with more accuracy using on-stage rulers and draggable guides.
- Shadows — Apply and animate text and box shadows for richer effects.
- Adjustable Timeline Grid — Gain greater animation precision by adjusting the time granularity where the playhead snaps.
- Enhanced Text — Create multi-line text and control leading, indentation, and spacing with added text properties.
- Who should use Edge Animate?
- Edge Animate is ideal for visual designers who want to energize their content for the web with motion and interactivity.
See answers to more frequently asked questions
System Requirements
The minimum system requirements for the Edge Animate preview are as follows:
Windows
- Intel® Pentium® 4 or AMD Athlon® 64 processor
- Windows 7 or Windows Vista®
- Windows XP is NOT supported
- 1 GB of RAM
- 200 MB of available hard-disk space for installation
- 1280x800 display with 16-bit video card
- Broadband Internet connection required for online services and to validate Subscription Edition (if applicable) on an ongoing basis*
Mac OS
- Multicore Intel processor
- Mac OS X 10.6, 10.7, or 10.8
- Mac OS X 10.5 is NOT supported
- 1 GB of RAM
- 200 MB of available hard-disk space for installation
- 1280x800 display with 16-bit video card
- Broadband Internet connection required for online services and to validate Subscription Edition (if applicable) on an ongoing basis*
Release Notes
Edge Animate is not a final product. We are still testing and validating the product, and this release is designed for evaluation purposes only. We do not recommend that this release be used on production systems or for any mission-critical work.