Beginning of the Timeline

About three years ago in 2011 — before Animate, before joining Adobe, before motion paths, gradients, responsive scaling and audio —  there was Edge. Edge (now rebranded as “Edge Animate” as a celebration of our 1.0) was a beta project being worked on by Adobe not yet released to the public.

EdgeProtoThe original Edge prototype created by Josh Hatwich and Mark Anders.

Back then I was working as a designer/Flash animator/front-end dev attending FITC Toronto. I crashed a session where the PM at the time (Doug Winnie) was showing off Adobe’s new product for HTML animation, drawing divs and creating motion on a timeline. Having just spent the past three days suffering from a JavaScript hangover and fighting a losing battle with a stupid graph thing, my jaw hit the floor when Doug moved a bunch of stuff around on the timeline in all of two seconds of spectacular glory that completely changed the way I thought of motion on the web.

After the session I stalked Doug through the halls of the Guvernment and wanted to see more. He walked me through the product while the marketing manager skulked in the corner taking notes on my behaviour, and my mind immediately went to all the cool stuff I wanted to build with it. A shot of vitamin B to cure my JS hangover. They invited me to the Edge prerelease program, a testing playground to give feedback and sniff out bugs before Edge would be released as a public beta.

Below are some of the scenario-style things I put together back in the day to hunt down bugs and play with the program. All the assets were drawn in Illustrator and animated with the corresponding version of the application.

The RollercoasterRollercoaster
Adobe Edge v 0.1

If I remember correctly, the Edge team was currently working on the transform-origin feature. At the time Edge was motion only (no interactivity).

Adobe Edge v 0.1.2

This was a test to try and see how external JS events could interact with the elements created with Edge. The “mask” was created with transparent PNGs and overlaid on the Edge animations. Warning: This looks really crappy on smaller viewports, but I was just playin’ around.

How to Crack an Eggegg
Adobe Edge v 0.1.3

This was the introduction of interactivity, so you could assign different events to objects. Ohhhhhh snap gamechanger. Watch out for the refrigerator.

Fruit Ninjaninja
Adobe Edge v 0.1.3

I wanted to push some of the boundaries you could create with Animate at the time and see what kind of effects you could create using images.


Looking back, it’s impressive what we were able to do even with the limited set of features at the time. We’ve come a long way since then thanks to the tenacity of the Animate development team (who are seriously rockstars) and our amazing community support.

EdgeAnimateThree years later, Edge Animate CC. Look at us now!

It’s fascinating to think back on the timeline of Animate’s history and how each release has pushed the bounds of what we can do with HTML. Freakin’ cool right?! (I think it is anyways). Software development is a good time.

You can check out some more samples here, circa 2011.

120,051 total views, 8 views today

Posted on March 13, 2014 by Sarah · 3 comments


Leave a Comment

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