Native HTML Canvas Animation – James Field Designs

So, the other day, I was commissioned to create a graphic that demonstrates the subject of responsive web design. My idea was to create a simple image of the same website re-purposed on the 3 main devices (desktop, tablet & mobile) which sums up nicely what responsive web design is and how it’s implemented.

It was simple but quite effective I thought. The client was happy with it considering the 2-hour deadline I was given.

Recently, I have downloaded a bunch of Creative Cloud apps from the ‘Edge’ family to see how Adobe’s approach to current web design is maturing. I was quite surprised to see how far they’ve come.

One app in-particular impressed. Edge Animate CC.

The interface is quickly becoming packed with tools and features that have propelled the app from a “quick fix” to jump on the bandwagon of native web animation to something users of AfterEffects would feel at home with. It’s far more intuitive to animate in then Flash, but not as powerful given the limitations of what can be done with a mixture of CSS and JavaScript (and certainly no replacement for AfterEffects)!

I was so impressed I wanted to dive straight in and learn how to use it. There are a bunch of tutorials built-in to the app which are quite good. But I was quite confident that my time spent in Flash & AfterEffects would be enough to start experimenting:

It sure was and in just an hour or so, the finished animation was completed. Click here to see it in action (requires a modern web-browser). Try resizing the window. You’ll see that it even behaves responsively!

Obviously, certain projects lend themselves to native web technology based animation. My graphic, for example, does because the elements are simple, they are consistent so they morph convincingly, and it is the perfect platform for turning a flat graphic, into a simple, animated, infographic.

I’ve got more plans for this if I get time. Firstly, I want the animation on the content (represented by the white rectangles), to be more original than just fading in and out. I would like these components to actually reflow just as it would when changing a browsers size on a responsive web page.