Download Adobe's new HTML5 animation tool

I joined Adobe specifically to build a Web-standards-based animation & interactivity app. Great thought, but we were a decade off base about when browsers would actually be ready to play ball.

That time has come, and the company is today releasing the first preview version of Adobe Edge, a fast, lightweight way to add life to your sites. Feature highlights in this release:

  • Create new compositions with Edge’s drawing and text tools.
  • Animate position, size, color, shape, rotation and more at the property level.
  • Bring motion to existing HTML files while preserving the integrity of CSS-based HTML layouts. (Edge stores all of its animation in a separate JavaScript file that cleanly distinguishes the original HTML from Edge’s animation code.)
  • Copy and paste transitions, invert them, and choose from over 25 built-in easing effects.

Check out Edge in action:

Additionally, Adobe has launched The Expressive Web, a site showing off some of the cool stuff you can make modern browsers do, especially by using Adobe tools like Edge and Dreamweaver CS 5.5. Here’s a demo:

Lastly, I don’t want to get into any tedious “Flash vs. HTML5” blah-blah here, though I do see that angle still bubbling up on link-baiting sites.  For that reason it’s worth noting that both Dreamweaver & GoLive were pushing Web animation starting in the 90’s, that Adobe championed SVG early on, and that it has been a main contributor helping to improve jQuery and lots of other HTML/JS/CSS tech.  Point is, Adobe’s been driving both rich, animated HTML and Flash for 15 years, and the company will keep evolving both to address different customer needs.

Meanwhile, we hope you like what you see in Edge, and we’d be grateful for your feedback. (Oh, and if you create some cool stuff with it, please show off a link in the comments; thanks.)

Related resource: Devnet on HTML5

17 thoughts on “Download Adobe's new HTML5 animation tool

  1. Downloaded…
    Loving it!
    Impressive how much can be done with so few functions in an App.
    But those few functions work very well!
    The interface is a godsend, I love the After Effects interface.
    The way Edge saves its projects/files is also very refreshing; ready to use for webdevs with many different workflows.
    If I run into anything that’s a bug (or bugging me) I will be sure to provide feedback.
    This is the edge (no pun intended) that I find missing in many recent versions of established Adobe apps.
    [Cool! Glad to hear it, and thanks for the feedback. –J.]

  2. And if you’re in New York, you can check out Edge and talk to the team at the Adobe HTML5 Camp this Friday:
    [Thanks, Rachel. That news is worthy of its own post, so I’ll queue one up for tomorrow. –J.]

  3. Fantastic! I’ve already made a couple of animations within minutes of downloading it.
    The HTML and CSS output is beautifully clean. The JavaScript it generates is a bit OTT, but I understand it needs to be there for browser compatibility. Well done to the team who put this together. Will be a godsend for animators, designers and After Effects enthusiasts. I can’t wait to start using it on real world projects.

  4. wow just amazed how smooth the animation is, and the logic of the way of working with it.. Must be nice for new users starting out.
    Where do i post feature requests / Bugs?

  5. Edge is very cool.
    At first is disappointed that it did not use CSS3 for animation, but after talking with Mark Anders, I realized that Adobe’s Javascript animation engine is very fast, even on mobile devices. I tested a animation on my iPad2 and it was surprisingly fast given it was all JS.

  6. Wow – This looks fantastic!
    Great video. One day all browsers will be equal (hopefully!)
    [I’m not sure whether that’s something to be hoped for. I often say, “Innovation or Consistency: Pick one.” That said, one can certainly hope for more consistent implementation of standards. –J.]

  7. Love it!
    Develop FASTER :0) please.
    Very excited about this next-gen flash like tool for us designer/coder hybrids.
    Hackathon needed at Adobe to get this out quickly.

Leave a Reply

Your email address will not be published. Required fields are marked *