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. 

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

Eggsercise

Eggsercise

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

Part of my audio reel 

 

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. 

Scoreboard logo

Scoreboard logo

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

I Design With Code ❤

I Design With Code ❤

Check out the SVG animation on CodePen here

Morphing Devices

Morphing Devices

Like this SVG animation? You can buy it

😀 ↔ī¸Â â˜šī¸

😀 ↔ī¸Â â˜šī¸

How are you today?

You can choose here

 

Interactive Fire

Interactive Fire

Keeping you warm while you wait!

You can buy this from my store here.

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.

Horizon.io Logo

Horizon.io Logo

Logo animation for Horizon.io

Check out the SVG animation on CodePen here

Soldiers of Fortune

Soldiers of Fortune

Check out the SVG animation on CodePen here 

Waterfall

Waterfall

Check out the SVG animation on CodePen here

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

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

 

SVG-Easy

SVG-Easy

Check out the SVG animation on CodePen here

Ducks In Boxes

Ducks In Boxes

Check out the SVG animation on CodePen here

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

Perpetual Pencil

Perpetual Pencil

Check out the SVG animation on CodePen here

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

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

Alarm UI

Alarm UI

Check out the SVG animation on CodePen here

Wifi Wipers

Wifi Wipers

Check out the SVG animation on CodePen here

Pencil Download

Pencil Download

Check out the SVG animation on CodePen here

Pull To Launch

Pull To Launch

Check out the SVG animation on CodePen here

Send Success/Fail

Send Success/Fail

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

3 Ball Drop

3 Ball Drop

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.gif
Fly Ball

Fly Ball

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

Popup-Oasis.gif
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.

Happy Snap logo

Happy Snap logo

Logo animation for a children's creative app.

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.

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