404 Bodymovin' — Website — OUGD602

To get the ball rolling in designing my own website, I wanted to teach myself a new fundamental skill within After Effects where a vector animation (SVG) can be converted in to JSON data, meaning only code is needed to produce the animation, eliminating the need for low quality GIF's.

Bodymovin' is installed to After Effects via a plugin, and just like any other animation, when you export, instead of using media encoder you select Bodymovin', sit back and let it produce the necessary files for you to import onto your server ready to go live on the world wide web.

I began by creating a custom type for my numbers within illustrator based off my own drawings:



After these were vectorised, then split into individual sections, they could then be imported into After Effects as vectors:



The resulting effect within AE:



And after transforming each slice through keyframes:



Then exported using Bodymovin':



And how it looks when it is live in a web browser:



I will continue to use this screen until the website is ready to go live, then even still this can be used as a standard 404 page.