Here’s a cute little animation I created for our partners, Imotion Media, for an Xmas e-card. It is less than 1MB, optimised for email. Continue reading Seasons Greetings from Imotion Media
I love bringing still images to life. Here’s a recent example of some banners I created for DietToGo, a well-known health food brand.
Just looking through some old work and found a banner I had created years ago. So what, you ask? Well, as banners go, it’s pretty gripping 😉
I created this for the BBC, to advertise a game related to one of their TV shows. It employs some pretty clever maths to animate some creepy vines which actually reach out to steal your mouse cursor. It was built in Flash, now partially resurrected with Ruffle/WebAssembly, so certain things don’t work (such as transparent background and filters). Try it out here!
In the video below you can see what it originally looked like.
What I love even more than creating animation: creating challenging code-driven animation.
For those that want to have a play with it, I tried to resurrect the Flash version using the Ruffle/WebAssembly emulator. On desktop it almost looks perfect. On mobile the cars may go invisible :/
So, here’s a video of the banner running…
How it works
The line dynamics itself is rather basic Hooke’s law physics stuff. But it took some experimentation to get a smooth curve drawn from end to end. Basically, it is a bezier curve and the ‘control points’ of the previous and next control points need to be in line.
The cars follow one of the line’s points with differing elasticity and damping. But the real pain in the backside was drawing the dashed line via code and ‘moving’ the dashes, in crummy early ActionScript (which had no API for programmatic dashed stroke drawing at the time). Luckily, I’m very persistent!
Some feedback I got from Bannerblog…