Responses by Martin Silvestre, art direction and AskPhill, development
Background: Jorik is the commerce website for Dutch rapper Lil’ Kleine, who is famous for his music and also for being a part of Dutch reality television competition The Voice of Holland. The target audience is not the fanbase of Lil’ Kleine, but users who are into contemporary street style clothing. The idea was to shock them with a website that they wouldn’t expect from a music artist who just started a fashion brand.
Highlights: The idea was to create an analog website using graphic codes from the ’90s—including pixel typography, transitions and animations of typography and fake 3-D art. This is an e-commerce site, so we had to focus on the conversation while keeping the artist’s imagery and fun navigation.
Challenges: Since this is our first creative development project, we didn’t know how to design the architecture to meet the requirements of all the animations. Because we needed to combat against the frames all the time, we realized the old component-based model had its limitations when we needed to manage different components in one animation frame. In the end, we used a hybrid approach to animate all the related components in one method while each component still manages its own state.
Also, it’s always difficult to do page transitions because the Shopify theme is not an SPA. The biggest hurdle regarding this is code splitting. Code splitting is necessary for a better performance, but all the frameworks available for page transition don’t handle this elegantly. We needed to write our own methods to load and execute different scripts in different pages.
Anything new: Complicated animations were new to us. We learned how to avoid banks by debouncing input events to animation frames. Also, among all the animations, smooth scrolling was tricky. By reading the Everyday3d blog and the source code of other packages that implemented this technique, we succeeded in implementing it for our specific needs.