GANNON.TV

Newton 2 and LEGO are seriously meant for each other. You can read about this project here.

Part of my LEGO series.

Playful yet professional SVG logo animation for Spider Strategies' Scoreboard software.

This was originally designed by Airbnb using Lottie, their new animation platform for iOS, Android and ReactNative. Lottie is an export tool that converts After Effects animations to JSON-driven SVG animations using Bodymovin.

Animations like this are still considered to be difficult and time consuming to achieve - my goal is to demonstrate that complex animation like this are entirely possible - I have recreated this using web technology only. 

Spider Strategies approached me for a third time to animate yet another one of their logos — this time for their productivity and KPI management software product.

Animated entirely with JavaScript and SVG for MailPoet.com this is probably one of the more complicated and detailed loader animations I've made.

The brief was to have a short 2 second animation to begin with and then, if the content was taking a long time to load, the animation would go into a longer loop.

I have paid a lot of attention to detail - the leaves and flower heads bob as the new flower emerges and the plant moves down - there is also gentle randomness in the flap of the wings and the hover.

And one of the most crucial aspects of a good loader is that it's small in file size and this weighs at 52Kb!

Logo animation for Horizon.

Pull to refresh animations are harder than they look because their structure is different from most other animations. They have an initial intro that is synchronised to the downward pull. This should have nice inertia as well as play so some complex nesting required.

Then once the pull has reached a certain point and is released the rest of the animation plays and loops. Then when the loading is complete it should disappear seamlessly. Lots of balls to juggle!

This is the Leaf app

As a veteran attendee and speaker (Elevator pitcher and speaker) of the Reason To Be Creative conference I was asked to submit an animated version of their logo to celebrate their tenth anniversary.

The multiple coloured dots are different sizes and travel at different speeds to represent the diversity of the people the conference attracts.. 

Check out the SVG animation on CodePen here

A very popular animation that I licensed to several clients in 2016.

Check out the SVG animation on CodePen here

I added audio to this animation here

Christmas card I sent to my clients in 2016. 

Check it out on CodePen here

This was a defining animation for me as it was one of my first SVG projects. It uses a lot of techniques I had been practicing over the previous weeks and months and came together in this, one of my most shared pens.

Check out the SVG animation on CodePen here

Collaborative audio production startup Backtracks approached me to animate their logo. The service creates layers of backup audio material and this is reflected in logo animation - the lines build one on top of another from transparent to full colour.

Created in SVG and used as an interstitial between page loads.

Bobotov Kuk is the highest peak in the Durmitor mountain range in northern Montenegro and apparently they needed a loading animation while they waited for climbers to reach the top.

Pretty sure that's what they said.

Check out the SVG on CodePen here

Drift is an alternative energy company for whom I have created all of their animated content.

Their logo is a single frame of the bird mark. In order to animate it I drew all the intermediate frames (wings with perspective are hard!) and then split the bird's body into separate pieces so that they could all be subtly animated.

Finally I created a dynamic spritesheet (not the traditional sheet with all frames in one image) and built a sprite sheet player to play it back. 

Doing it this way means I can edit individual frames in the browser without having to re-export every time. This sped up production time and saved the client money.

Logo animation for Happy Snap, a children's augmented reality app.

Logo and loader for the indie movie Last Black Man in San Francisco. I still haven't seen it.

SiteW helps non-technical people make websites. The logo animation underpins the concept that a great result can come from simple beginnings.

The Body Astrology logo animation

Home is an agency in Bristol - they approached me to create several animations to showcase the services they offer their clients.

Visit these links to see the various animations I created:

Home - Social

Home - Sharepoint

Home - Emails

Home is an agency in Bristol - they approached me to create several animations to showcase the services they offer their clients.

Visit these links to see the various animations I created:

Home - Social

Home - Sharepoint

Home - Emails

Home is an agency in Bristol - they approached me to create several animations to showcase the services they offer their clients.

Visit these links to see the various animations I created:

Home - Social

Home - Sharepoint

Home - Emails

A complex logo that took a long time to optimise so that it played back smoothly. This got the pure SVG treatment.

One of a handful of animations I've created for the lovely folks at Landing Lion for their new product to be launched in 2018. I love their line art style and animating their illustrations is a real treat.

Designed for the Welsh speaking TV channel S4C this SVG animation is used as a loader for their on-demand streaming service. I also designed the animated play button in the same style. These were built in React.

An SVG loader I created for Laravel Vapor Serverless Platform to be launched at Laracon.

A logo I created for my talk and workshop at SmashingConf in Toronto

Cole + Associates went through a rebrand and change of name and so approached me to create an animation that conveyed that change and showed off the new logo.

Logo animation for Audyo

Halfie is the new name for Pawsy, a pet brand in France. The name changed simply because Pawsy is too difficult for native French speaks to pronounce!

AI logo for Spider Strategies