The client

HULT is an international business school with multiple branches in North America, Europe and Asia. Their team contacted me during the recent redesign of the main HULT website and asked me to create several SVG animations for the new website.

The brief

The client provided me with 5 SVGs to animate. All five animations had to support two scenarios:

On the page load – in the hero of the webpage:

Step 1: The shapes of each SVG should come into view at different rates over a specified amount of time.

Step 2: Shapes should transform seamlessly in different ways for a certain amount of time and then be set into the final position at the end of the animation.

On the hover of programme cards:

Step 1: The shapes of each SVG should come into view at different rates over a specified amount of time.

Step 2: Shapes should animate independently as long as the card hover is active.

Step 3: Animation should go back to the original state (Step 1) as soon as the mouse hover is over.

Finished animations had to be reusable. Also, they had to be as light as possible to avoid adding extra weight to the overall webpage size. I could not use any JS animations library. And last but not least – I had just about 10 days to complete the project.

I loved the challenge!

How I did it

Considering all the requirements, the client and I decided that CSS3 animations were the best tool for the job. It allowed me to inject animations code straight into the SVGs, making the files ready to use without any external libraries.

In all five illustrations, there were 78 shapes to animate in total. I knew I could reuse some aspects of animations like timings and transforms. Still, the way shapes animated had to feel very natural, so not many shortcuts were allowed. This meant that I had to develop a very structured plan to organise this project to complete in 10 days.

Since both hero and card animations had to start in the same way but end differently, it was not five animations that I had to create, but ten. 

So how did I do it? To me, this project was all about good organisation. First, I restructured each original illustration to support both hero and card animations. This step included adding class names to all shapes within each SVG file and writing reusable mixins and functions in SCSS to aid the development. 

Next, I wrote shared and dedicated styles for all animations. Using the SCSS preprocessor allowed me to set up my solution to output two sets of CSS for both animation types, which I could then inject into appropriate SVG files. 

Results

Preparing like this early in the project allowed me to adjust animations individually and together. It also meant that this project was scalable, which eventually became very useful when HULT asked me for one more similar animated illustration a month later. 

Thanks to the decisions I took early in the project, I produced the last animation in half time, thus reducing the cost to the client.

Each animated SVG came out very small in size, the biggest one being 68 KB. And, of course, since SVG is a vector format, all animations could be used at any size without losing any quality.