The Client & The Challenge

HULT International Business School, with branches across North America, Europe, and Asia, approached me during their website redesign. They needed five custom SVG animations that would be:

• Lightweight – Minimal file size to maintain fast page loads.
• Reusable – One animation framework supporting multiple use cases.
• CSS-Only – No JavaScript libraries allowed.
• Time-Sensitive – Completed within 10 days.

The animations had to work in two scenarios:

1. On Page Load (Hero Section) – Shapes should fade in, transform naturally, and settle into a final position.
2. On Hover (Programme Cards) – Shapes should animate continuously while hovered andreturn to their original state when the mouse leaves.

With 78 shapes across five illustrations and each requiring two animation variations, I was effectively building 10 separate animations under a tight deadline.

I loved the challenge!

My Approach: Precision & Scalability

To meet the requirements efficiently, I structured the project into three key phases:

1. Restructuring & Preparation

• I cleaned and restructured each SVG to ensure scalability.
• Class names were assigned to all shapes for easy targeting.
• I wrote SCSS mixins and functions to keep animations modular and reusable.

2. Developing Optimised Animations

• Using CSS3 animations, I kept files lightweight and self-contained, eliminating the need for external scripts.
• Shared timing and transformation rules ensured natural movement while keeping the code manageable.
• SCSS and node.js were leveraged to output two sets of CSS - one for hero animations and another for card hover animations.

3. Testing & Fine-Tuning

• I rigorously tested each animation to ensure smooth performance across devices.
• Adjustments were made to individual animations while maintaining a consistent, high-quality motion experience.

The Outcome: Lightweight, Scalable, & Cost-Effective

• All SVG animations were delivered within the 10-day deadline.
• File sizes remained tiny, with the largest animation at just 68 KB.
• Animations were fully scalable without loss of quality.
• The project’s structured setup allowed me to create another set of animations a month later in half the time, reducing costs for HULT.

By prioritising organisation, efficiency, and scalability, I ensured that HULT’s animations not only enhanced their website but also provided long-term value.

Key Takeaways

• Well-structured code save time & cost.
• CSS-only solutions keep animations lightweight & performant.
• Reusable frameworks allow easy expansion for future needs.

Need custom SVG animations for your project? Let’s talk! 🚀