August 01, 2011

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

Posted by John Nack at 11:25 AM on August 01, 2011

Comments

  • Bastiaan van Zwieten — 11:50 AM on August 01, 2011

    Downloaded…

    Installed…

    Tested…

    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.]

  • Rachel Luxemburg — 11:55 AM on August 01, 2011

    And if you’re in New York, you can check out Edge and talk to the team at the Adobe HTML5 Camp this Friday:

    http://bit.ly/HTML5NY
    [Thanks, Rachel. That news is worthy of its own post, so I’ll queue one up for tomorrow. –J.]

  • Dieki Noordhoek — 1:14 PM on August 01, 2011

    Awesome! :D

    Will it be part of Adobe CS6?

  • Simon — 6:50 PM on August 01, 2011

    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.

  • Alex Dukal — 9:31 PM on August 01, 2011

    First thought after seeing the first video:
    Oh! DHTML has been updated!

  • Poul_g — 2:31 AM on August 02, 2011

    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?

    Cheers

    • Randy Riggins [Adobe, Edge Team] — 8:25 PM on August 02, 2011

      The Edge Labs User Forum page can be reached from the download page. Please post feature requests, bugs and general feedback there. Here’s the link: http://forums.adobe.com/community/labs/edge/

      Thanks for trying Edge!
      Randy

  • Flash video player — 3:53 AM on August 02, 2011

    The new animation tool a great intro and an nice update for animators!

  • Jeremy Chone — 8:05 AM on August 02, 2011

    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.

  • Alex — 8:26 AM on August 02, 2011

    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.]

  • Andre Reinegger — 2:34 PM on August 02, 2011

    Awesome tool for a first preview version!!! Even if I am a big fan of the Flash technology. Thanks for sharing this video!

  • Mario — 3:00 PM on August 02, 2011

    I really wish that this one has a lot of success fast.

  • Lisa — 7:10 AM on August 03, 2011

    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.

  • Jeremy Chone — 11:43 AM on August 04, 2011

    I was impress on the performance of the output on my iPad2.

  • BJN — 9:34 AM on August 08, 2011

    Welcome back, LiveMotion!

  • Anil Mathew — 11:42 AM on August 23, 2011

    Like it :)

  • Erica — 10:55 AM on December 14, 2011

    Will we be able to create interactive presentations with this tool too? That is what i use Flash for the most.

Copyright © 2014 Adobe Systems Incorporated. All rights reserved.
Terms of Use | Privacy Policy and Cookies (Updated)