Golden State of Mind

PacSun

Role

Lead Front-End Developer

Team

Executive Creative Director: Todd Purgason
Creative Direction: Jeff Whitney
Art Direction: Karie Jamison
Copywriter: Josh Eck
Backend Developer: Sam Fahmie

Background

PacSun approached Juxt Interactive with a simple request: Create us an award-winning website. They wanted something that would be talked about and bring attention to their new website showing off the California lifestyle.

The designers heading up the project knew that meant they had to go big and attempt something that hadn't been seen before. They latched onto the word "mind" in "Golden State of Mind," and thought, wouldn't it be something if instead of a traditional website where you scroll down to get to the content, you would instead scroll up like you're going into someone's mind?

New navigation
What was presented to visitors when they first arrived on the site. Scrolling upwards would tuck the tray away.

Solving the problem

Everything within me screamed, "No! Don't torture me to implement this!" Nothing like this had ever been attemped before, but I broke down what would need to be done to achieve this effect:

  • Parallaxing. This was the simplest part because it was so on-trend at the time and a lot of guides and tutorials were available on how to achieve the effect.
  • Lazy-loading the content as the user scrolled. Due to bandwidth limitations and an emphasis on beautiful imagery, I need to find a way to have the content slowly load in as the user scrolled, as opposed to having it all load in the beginning. Getting users right into the experience is better than sitting through a loading screen.
  • Infinite scroll. The concept called for an infinite scroll, where once the user got to the "top", they would automatically be looped back to the bottom, but the transition needed to be seamless to create the illusion of an infinite scroll.

Implementing a custom scrollbar and hiding the browser's scrollbar ended up being the solution to most of these problems, and also the biggest challenge. I came across another site that had implemented a really nice custom scrollbar, and then reverse-engineered their code to get it to work for this project (and of course, making it function from bottom to top instead of top to bottom like a traditional scrollbar).

The code and logic became so entangled at one point that I ended up scrapping it completely and did a major rewrite. Once I had control of the scrollbar though and could control the user's view of the different "panels" as they scrolled up, it became a matter of testing and adjusting until it created the smoothest experience for the user.

Video showing off the full website experience.
New navigation
Scrolling down on the home page would always bring up the tray regardless of where they were in the experience.
New navigation
One of the panels that appeared as you scrolled up.
New navigation
The blog section of the website. This was simple compared to the complexity of the home screen - Masonry was used for the layout.
New navigation
A map showing different attractions in California. This was a reskinned Google Maps embed.

Outcomes

The site was a massive success when it launched. It collected awards from FWA, Communication Arts Web Pick of the Week, Awwwards Honorable Mention, and was featured by Creative Bloq.