Morphing Devices

Morphing Devices

A slick morphing animation between devices.

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

😀 ↔️ ☹️

😀 ↔️ ☹️

How are you today?

You can choose here

 

Play Loader

Play Loader

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

Scoreboard logo

Scoreboard logo

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

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 nearly 200M 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!).

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. 

Spider Impact logo

Spider Impact logo

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.

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!

Interactive Fire

Interactive Fire

Keeping you warm while you wait!

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

I Design With Code ❤

I Design With Code ❤

Check out the SVG animation on CodePen here

LEGO Loader

LEGO Loader

Everybody loves LEGO and nobody likes waiting. 

Here's the beautiful vector version on CodePen.

Part of my LEGO series.

Egg Toggle

Egg Toggle

If social 'likes' are a measure of success (and let's be realistic - they're not) then this was a hit - over 1200 likes on Twitter and featured in magazines, blogs and design sites, Egg Toggle is a really popular interactive animation. 

 

Read more about it here

Nectar Bird

Nectar Bird

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!

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

 

Horizon.io Logo

Horizon.io Logo

Logo animation for Horizon.

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.

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

Drift animations #1

Drift animations #1

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.

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.

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

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.

Happy Snap logo

Happy Snap logo

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

Echo Living

Echo Living

Freedom Forever

Freedom Forever

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.

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.

EOS

EOS

The Body Astrology logo animation

Minimal DNA

Minimal DNA

DNA logo.

Check out the SVG on CodePen here

 

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

Helios Med Comm logo animation

Helios Med Comm logo animation

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

Paint The Rainbow

Paint The Rainbow

Landing Lion Loader

Landing Lion Loader

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.

Bauble Toggle

Bauble Toggle

I've always enjoyed making Christmas based things. Like most children I was constantly drawing pictures of Father Christmas and snowmen and reindeer and presents and Christmas trees and sleighs.

My love for all things Christmas has only swelled with age - long may it continue! Merry Christmas!

Walking Time Bomb

Walking Time Bomb

Loaders Conference Talk

Loaders Conference Talk

My recent talks were split into several sections - dials, buttons, animations, sliders etc. Each had their own intro screen. This was for the Loaders section.

Sushi Toggle

Sushi Toggle

I love toggles and I love sushi. End of.

Water Direct

Water Direct

Logo animation for a client that wanted to impress Water Direct and take them on as a client.

Wobble Toggle

Wobble Toggle

Wimbledon Toggle

Wimbledon Toggle

Flowerpot Slider

Flowerpot Slider

You can play with it here.

And here it is with sound.

Spider Strategies File Loader

Spider Strategies File Loader

Fried Egg Loader

Fried Egg Loader

Snow Squirrel

Snow Squirrel

Someone posted this video on Twitter saying it would be funny if someone made it into a loader.

Ok so I wasn’t very busy that day.

Science Slider

Science Slider

You can experiment with it here!

UFO Slider

UFO Slider

Tube Toggle

Tube Toggle

Dribbble Invites

Dribbble Invites

Night and Day

Night and Day

S4C Logo Loader

S4C Logo Loader

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.

Drip Loader

Drip Loader

Blockchain Loader

Blockchain Loader

A blockchain loading animation loop.

R1 Logo

R1 Logo

Qaterie logo loader

Qaterie logo loader

Laravel Vapor Loader

Laravel Vapor Loader

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

Smashing Dots logo

Smashing Dots logo

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

Selene logo

Selene logo

Bitcoin Loader

Bitcoin Loader

Hi!

Hi!

Digital Ignite

Digital Ignite

IDEA (Cole + Associates >> IDEA rebrand)

IDEA (Cole + Associates >> IDEA rebrand)

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.

Smart logo

Smart logo

Sunspot Loader

Sunspot Loader

Evolve Logo Loader

Evolve Logo Loader

Pea Pods - Cookies

Pea Pods - Cookies

Cookie policy animation for peapods.com

Audyo Logo

Audyo Logo

Logo animation for Audyo

Cinema Loader

Cinema Loader

Here’s a more cinematic version on Instagram

Halfie (formerly pet brand Pawsy)

Halfie (formerly pet brand Pawsy)

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

AI logo for Spider Strategies

 The slider from the Westworld UI.

The slider from the Westworld UI.

Smart home temperature

Smart home temperature

 Love slider

Love slider