Dragging the slider changes the character's outfit to match different time periods, while the year adjusts to match each era.
Coming into this project, I knew very little about the history of men's clothing. So I visited my local library to find resources on 20th-century fashion and discovered "Fashion Since 1900," which provided great historical context and photos from each decade.
I was first inspired by the SMISKI an Japanese miniature figures, which had simple body and large head. But the design was not working, so I move to an design that more cartoony.
Given the project's one-month timeline, I focused on four representative decades. Each outfit was designed to capture the most popular men's fashion trends of its respective era.
This was my first time using Rive, an interactive motion design tool. An key feature that I wanted to learn their rigging tool, which allow to create skeleton for 2D graphics. Though it took hours of testing and learning, but it drastically reduced animation time.
What makes Rive truly powerful is its state machine, which connects and controls animations based on logic. Combined with the rigging system, I could create smooth transitions between different animation states that users can freely explore.
The main character was fully rigged allowing for fewer key framers. This process allowed me to add the different period clothes without having to animated each character individually.
The big hurdle was getting the bottom slider to work property. The idea to have the interaction to be a slider, where user have slider across to see each individual time period. But bring that interaction was harder than expected.
The traditional slider approach wasn't working in Rive. With help from another designer, we figured out a workaround using hover-over triggers. When users press the button, five hover-over containers appear, allowing to move the button over the containers to trigger different animations.
This project pushed me to learn Rive, which feels like a combination of Figma and After Effects. My main goal was to master character rigging for an upcoming capstone project, which led me to choose men's fashion as my subject matter.
The biggest challenge was the bone structure setup. I spent roughly 60% of my time just figuring out how to rig the character properly. Each limb required six separate bones, and because I wanted clean outlines, I needed two layers for every body part (fill and outline). This made the initial setup incredibly complex.
But, the character setup paid off. By organizing each outfit as its own solo state in the state machine, I only needed to animate the base character once. All four outfits would then follow that animation automatically. Each decade brought new technical challenges, but I enjoyed problem-solving my way through them to achieve the result I image.
