Play Loader

Play Loader

LEGO Loader

LEGO Loader

Everybody loves LEGO and nobody likes waiting. 

Here's the beautiful vector version on CodePen.

Part of my LEGO series.

Love LEGO

Love LEGO

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

Part of my LEGO series.

Get Your Growth Logo

Get Your Growth Logo

I Design With Code ❤

I Design With Code ❤

Check out the SVG animation on CodePen here

Scoreboard logo

Scoreboard logo

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

Lottie logo

Lottie logo

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. 

SVG Balloon Slider

SVG Balloon Slider

With over 50,000 views and nearly 1000 hearts SVG Balloon Slider is probably one of my most popular interface design experiments. It was an off-shoot from a client project and was one of those ideas that just arrives fully formed - all I had to do was execute it (which I did, almost without blinking). 

It uses the SVG goo filter effect and I always try to take popular effects like this and do something different that nobody has tried.

Have a play with it on CodePen here

 

Morphing Devices

Morphing Devices

A slick morphing animation between devices.

Want this animation for your project? You can buy it here.

Interactive Fire

Interactive Fire

Keeping you warm while you wait!

One of my more popular interactive animations this has 3 million views on Giphy.

You can buy this from my store here.

Desk Fan

Desk Fan

This is the first proper model I ever made in Cinema4D. It's rendered using Sketch and Toon and currently has 1.8M views on Giphy

Interactive Eggs-ercise

Interactive Eggs-ercise

Check out my post on the future of interactive animation.

You can play play with this animation on CodePen.

I made this as a pure animation in After Effects a while back when I first bought RubberHose (and before Bodymovin was supported). Consequently I used features that weren't supported.

Finally I have refactored the animation (and entirely rebuilt some graphical components) to conform to the Bodymovin export spec. 

I must say refactoring wasn't as bad as it could have been - the Bodymovin and RubberHose UIs are getting better all the time and they are really starting to work well together as long as you're aware of what is and isn't supported. 

I've had to make a few compromises - I built the treadmill with a RubberHose noodle using lots of unsupported features - it looked perfect in video but wouldn't export in Bodymovin. I had to draw and animate it in a way that makes SVG happy (which isn't easy!).

Many me!

Many me!

I've been watching James Curran's interview on GIF animation, He uses Maya for a lot of his projects so I thought I'd attempt to recreate one of his with my own illustrations in SVG for funsies!

Horizon.io Logo

Horizon.io Logo

Logo animation for Horizon.io

Check out the SVG animation on CodePen here

Trapdoor Bubble

Trapdoor Bubble

A little test loop to try out an unreleased GreenSock feature.

I'm in the fortunate position of being one of only a handful of designers who get to try out new GreenSock stuff, contribute ideas and suggest functionality.

Aside from Jack's laser focus and coding chops, this approach is what makes the platform so strong and so popular - if any of us need functionality we can just ask and if there's a strong case for it, it goes in. This has helped me and my clients on numerous occasions.

😀 ↔️ ☹️

😀 ↔️ ☹️

How are you today?

You can choose here

 

SVG-Easy

SVG-Easy

Check out the SVG animation on CodePen here

Perpetual Pencil

Perpetual Pencil

Check out the SVG animation on CodePen here

Tennis Ball Strut

Tennis Ball Strut

Created in After Effects using RubberHose and exported as SVG for web using Bodymovin this is another foray into the stressful world of walk cycles.

I wrote a little JavaScript library called ScrubBodymovinTimeline that lets you scrub through your Bodymovin timeline in the browser. This allows finer control when previewing the motion and any interactivity you might want to add.

Have a look on CodePen here - just drag your mouse back and forth inside the main animation window (desktop only).

 

Soldiers of Fortune

Soldiers of Fortune

Check out the SVG animation on CodePen here 

Leaf app

Leaf app

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

Egg Lamp

Egg Lamp

Eggsercise

Eggsercise

This is my first attempt at a walk cycle (that I'm willing to show you anyway!).

Update 02-05-2017: I refactored this, made it interactive and exported it to SVG using Bodymovin. You can play with it here!

Part of my audio reel

 

Gannon.TV Animation reel 2016

Film producers FlyOTW asked if they could add audio and foley sound to some of my work and I am quite pleased with the result. This is the first in a series. 

Light Speed

Light Speed

I created this in Cinema4D after trying unsuccessfully to get it looking good in SVG. I think if I tried again now I'd be able to do it.

This has been used across countless sites commercially and notably in an editorial for Tech In Asia for 8K streaming video.

Tendrils

Tendrils

I really want to create thousands of these appearing randomly all over my studio walls.

Check out the SVG on CodePen here

Download Success

Download Success

One of my most popular UI animations.

Waterfall

Waterfall

Check out the SVG animation on CodePen here

Fontness Exercise - C

Fontness Exercise - C

A silly little project to test out a GreenSock plugin called endArray.

Check out the collection of them on CodePen here

 

LEGO Loop

LEGO Loop

A little loop I created for my son who loves LEGO.

 

Part of my LEGO series.

Road Block

Road Block

Check out the SVG animation on CodePen here

Magic Flow

Magic Flow

A little excerpt animation recreated from this wonderful animation by Markus Magnusson

Check out the SVG animation on CodePen here

Ducks In Boxes

Ducks In Boxes

Check out the SVG animation on CodePen here

Responsive LEGO

Responsive LEGO

My personal project centred around LEGO continues, this time with a brick selector - not only can you choose the colour but also the size!

I built this using GreenSock, Bodymovin, After Effects and plain old SVG.

Part of my LEGO series.

 

Blob Machine

Blob Machine

Check out the SVG animation on CodePen here

Kiosk Icon Menu

Kiosk Icon Menu

Designed for a client's kiosk.

Check out the SVG animation on CodePen here

Home Dial

Home Dial

I've always wanted to make a dial with dynamic scales that could control the home.

I love the Nest but I wanted to make something a little more minimalist. This is my first attempt.

Check out the interactive SVG on CodePen here

I PLAY WITH CODE 🎈

I PLAY WITH CODE 🎈

Check out the SVG animation on CodePen here

Location Loader

Location Loader

Check out the SVG animation on CodePen here

Pod Sider

Pod Sider

Check out the SVG animation on CodePen here

Reasons.to Logo Remix

Reasons.to Logo Remix

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

 

QuickScore logo

QuickScore logo

Christmas Puddings

Christmas Puddings

Check out the SVG animation on CodePen here 

Instant Coffee Icon

Instant Coffee Icon

Check out the SVG animation on CodePen here

Material Design Swatch

Material Design Swatch

Check out the SVG animation on CodePen here

Orange Juice

Orange Juice

Check out the SVG animation on CodePen here

This also appears in a demo reel with audio here

Download Icon

Download Icon

Check out the SVG animation on CodePen here

Alarm UI

Alarm UI

Check out the SVG animation on CodePen here

Merry Chris-morph!

Merry Chris-morph!

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

Wifi Wipers

Wifi Wipers

Check out the SVG animation on CodePen here

3 Ball Drop

3 Ball Drop

Check out the SVG on CodePen here

Send Success/Fail

Send Success/Fail

Pencil Download

Pencil Download

Check out the SVG animation on CodePen here

SVG Bubble Slider

SVG Bubble Slider

This was so much fun to make!

I wanted to use the goo filter effect in SVG in a much more coherent way and this emoji chooser sort of emerged.

And the best part about it is that it's dynamically created meaning you can just add an emoji graphic to the SVG group and the code detects it and auto-magically adds it to the slider.

Be baffled, angry or happy on CodePen here - whatever you do, don't be neutral.

Pull To Launch

Pull To Launch

Check out the SVG animation on CodePen here

Merry Christmas!

Merry Christmas!

Christmas card I sent to my clients in 2016. 

Check it out on CodePen here

Info Graph

Info Graph

I've been working on a similar mechanism for a client recently and this was an initial test. I thought it had some promise so I spent a bit longer on it to get it working a bit better.

Check out the interactive SVG on CodePen here

Rock Ripples

Rock Ripples

This animation is using some heavy filtering to achieve the ripples and reflections so it's best to visit this on a desktop/laptop!

Check out the SVG on CodePen here

Dot Release.gif
Just Relax

Just Relax

Check out the SVG animation on CodePen here

Life is Short

Life is Short

It's depressing but true.

Fly Ball

Fly Ball

Playing around in Cinema4D with random motion and gentle, elastic collision

Popup Oasis

Popup Oasis

Where's The Love.gif
Ice Lolly

Ice Lolly

Check out the SVG animation on CodePen here

Rainbow Rocketman

Rainbow Rocketman

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

 

Backtracks.io logo

Backtracks.io logo

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.

Bobotov Loader

Bobotov Loader

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

Light Progress

Light Progress

I was inspired by a CSS version of this and I wanted to work out the process of building it in SVG as the two methods are quite different though they share common approaches.

I made a video of the process on my YouTube channel.

Check out the SVG on CodePen here

Goo Bubble

Goo Bubble

This is one of my more popular animated loops - everyone loves the goo!

Check out the SVG animation on CodePen here

Supacaz Logo

Supacaz Logo

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

Happy Snap logo

Happy Snap logo

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

Drift logo

Drift logo

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.

SiteW logo

SiteW logo

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

Last Black Man in San Francisco

Last Black Man in San Francisco

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

Minimal DNA

Minimal DNA

Trying to reduce the graphics required to represent DNA to a minimum.

Check out the SVG on CodePen here

 

EOS

EOS

The Body Astrology logo animation

Light Cycle

Light Cycle

This is what I do when first get back from holiday.

Home - Sharepoint

Home - Sharepoint

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 Email

Home Email

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 - Social

Home - Social

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

Stop Go Radio Button

Stop Go Radio Button

A popular UI component designed to add fun to the interface.

Try it out on CodePen here

Yes or No?

Yes or No?

Choose your answer on CodePen here

Dog and Bone

Dog and Bone

A fun little interactive project featuring my beagle!

This pen explores several techniques. Firstly it's an attempt at making 2D elements appear slightly 3D by changing the position and thickness of the various elements (like the ears) when the cursor moves around (desktop only).

I'm particularly proud of the light shine on the dog's nose changing as its head moves.

Don't forget to mesmerise the dog my clicking the bone to make it spin!

Give the dog a bone on CodePen here

Box Creeper

Box Creeper

Jump Loader 2017

Jump Loader 2017

LEGO Head

LEGO Head

An interactive Bodymovin experiment that lets you swap out various objects that the LEGO head is holding. Because why not!?

Part of my LEGO series.

Pink Drink Machine

Pink Drink Machine

Dot Dot Dash

Dot Dot Dash

Hexadots

Hexadots

Square Drop Loader

Square Drop Loader

Dribbble Invites

Dribbble Invites

Paint The Rainbow

Paint The Rainbow