Methodist Centre

A teammate owned the website UI; I handled animation. The client wanted a moving hero, and the lead showed me a reference: “Can you make something like this?”

I was first asked to build it in SVGator — but that splits the work: animate in the editor, then wire up every interaction with JS event listeners later. I went looking for a tool that did both in one place, and landed on Rive and its State Machine. After weighing the trade-offs with the team, we switched.

Rive is timeline-based and works with both vector and raster art. Animation timelines are States; you wire them into a State Machine with transitions, and drive those transitions with inputs — numbers, booleans, triggers. An Events feature can even send signals back out to your code.

MC's core services — Health Care, Youth, Family & Community Care, and Elder Care — became four buildings. Each highlights on hover and opens an external link on click, with extra moving details bringing the whole scene to life.

Hover highlighting pushed a building's layer to the top, which made passing vehicles look like they were driving under it — solved with careful layering. And external links were a puzzle: Rive had no Events function yet. Days into the project, Rive shipped Events — General, Open URL, Audio — and the click-through links fell into place.

Rive animations run through an open-source runtime — the same one powering this portfolio's hero. You can play with the MC animation live.