Loading ...

Responses by Eric Van Holtz, owner of Van Holtz Co, and Jerry Yeh, cofounder and chief operating officer of Safari Riot

Background: Safari Riot: Noise is an audio-focused creative company at the intersection of social media and interactive content. The company works with brands, studios and production companies to help bring thoughtful and modern content to their products and experiences, whether it’s a score for a blockbuster film trailer, designing sonic interactions for products or building an interactive music system for a video game.

Design core: The design, animations and interactions make it stand out from other websites. We wanted to capture the user’s attention right away with a quick introductory animation. The project scrolling and hover states can feel wild with text trails, vibrant colors and blended video sequences all to get users to explore Safari Riot’s award-winning work. The page transition is a throwback to an old CRT television turning on and off, using the project’s featured color.

Navigation features: On the homepage, visitors can use filters to narrow the portfolio down to certain categories. On project pages, the content shifts to the left to reveal a link to the next project if you hover on the right side of the screen. The site never has to do a hard refresh and uses animated transitions that load new content dynamically. This was made possible with the open source JavaScript library, Highway.js.

Technology: Craft CMS powers the site—it’s actually a two-in-one! The main Safari Riot site and noise.safaririot.com both use the same CMS under the hood and are managed together, so they can share pages, assets, themes and navigational structure. Most of the animations are created in CSS, but some interactive animations and state management uses pure JavaScript. Landbot powers the contact page, which parses out different clients through a series of interactions. This enables us to interact with and on-board each client more efficiently and intimately.

Anything else: As the website started picking up traffic, we noticed the bandwidth usage began to skyrocket due to the site’s heavy use of video. We quickly upgraded the web server to a more powerful one with four times the bandwidth.

noise.safaririot.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In