Back from SxSW and Cool Edge Examples

For the launch of Edge preview 5, I was at SxSW where I presented Edge with Paul Trani as part of the day long Adobe Creative Camp.  The feedback was great and I spent a bunch of time talking with people afterwards, getting their thoughts on what we are doing.

One of the things I always do as part my sessions is to show some examples of what the community has done with Edge thus far.  In a lot of ways, this is the most motivational part of the session as it shows what’s possible, where my demoing the tool simply explains what’s there and how to use it.

I had a few requests from attendees afterwards and one who commented on my blog to post the samples I showed and so I thought I would do it here.  Here’s the list!

  1. Getting Jumpy #1
  2. Getting Jumpy #2
  3. German Wedding Photographer
  4. Google+ follow me button
  5. Patrick MK Williams Portfolio Site

Dave Nibley’s Bouncy Examples

The first time we saw Dave Nibley from Rain’s Getting Jumpy #1, was in mid-July, a few weeks before Preview 1 was released. Dave posted it to our pre-release forum noting that it was his first Edge animation.  Everyone on the Edge team was in shock.  We had never seen anything created with Edge before that looked so smooth and refined.  Since most of our time was spent animating gray rectangles and text, it was incredible to see what someone who really knew how to animate could do with it.  Dave is a great motion designer with a strong background in After Effects, he found Edge really intuitive and easy to use and seeing his work was a great motivation for us.

A week later, Dave came by our office as part of our early access program, I got to meet him, and we gave him a new build of Edge.  In about an hour or so, he created Getting Jumpy #2, which we liked even more than the first one!  It reminded us of the well known Pixar animation and made great use of the easing equations.

Berlin Wedding Photographer

Edge Preview 1 went live on Monday August 1st at 12:01 EST or New York Time, as I like to think of it, being a native New Yorker. For me, it was 9PM on a Sunday in San Francisco and so I spent the night blogging, tweeting and answering the first questions on the Edge Forums.  When I woke up the next morning, there was a post from a wedding photographer in Berlin who basically said that they downloaded Edge, figured it out right away, created an animated content rotator for their site and deployed it!  They said that they had wanted to do something like this for a while, but didn’t know Flash and wanted it to run on an iPad.

The Edge animation is on the homepage of the site.  What amazed me was that in the time it took me to get a night’s sleep, they were able to find Edge, try it and be successful.

Roman Liutikov’s Follow Me

At the time Preview 1 went live, Roman Liutikov was a 19 year old student living in the Ukraine and on August 1st he posted a video of an animation he did in After Effects  planned to recreate with Edge.  It took him a whole 3 days, but on August 4th, he posted a very wild animation done with Edge for a Google+ follow me button.

In addition to being really cool and stretching the boundaries of what Preview 1 could do, what was interesting was that it was the first example to incorporate sound, even though Edge didn’t support audio and in fact still doesn’t as of Preview 5.  But because Edge files are just HTML, he just hacked it in and it worked.  The funny thing was that when you opened the project in Preview 1 and maybe even Preview 2, the audio would play – continuously, as he had it in a loop, because the Edge design surface is WebKit.  We have since disabled audio from playing.

Patrick MK Williams Portfolio Site

The final example I showed was really cool portfolio site created by Patrick MK Williams.  It’s beautifully designed, has lovely motion and advanced interaction.  It’s definitely one of the most complete examples I’ve seen done in Edge.  While the previous examples were all done with the preview 1, this one could not have been.  It really requires the Symbol capability, which was introduced in preview 4 back in January.  Symbols are independent objects with their own timelines, and Patrick’s site makes great use of them. Try it out and definitely explore the various interactive elements of the site.

Just Scratching the Surface

Of course, there are a lot of other great examples that I didn’t show, due to time.  In the SxSW presentation, we had a lot to cover with Preview 5 and so I only picked a few , but ones that I think tell an exciting story about Edge and what you can do with it.

If you are interested in checking out what people are doing with Edge beyond these, there’s a thread that I started back in August called “Post Your Edge Animations!“.  While not everything will amaze you – after all, a lot of what’s there are people’s first Edge creations, it is a lot of fun to see all of the passion as people discover what you can easily do with HTML5, CSS3 and JavaScript using Adobe Edge.