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!
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.
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.
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
A slick morphing animation between devices.
Want this animation for your project? You can buy it here.
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
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!).
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
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.
Have a look on CodePen here - just drag your mouse back and forth inside the main animation window (desktop only).
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
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.
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.