Developing Moxey: A Behind-the-Scenes Look at the Process

Hey there, I’m Matt, a creative designer and developer based in Marbella, Spain.

Today, I’d love to take a closer look at the development process behind one of the projects I completed a few months ago — Moxey.no.

This website is the result of a great collaboration with Studio Oker, based in Norway. They handled the visual side of the project, providing strong creative direction and web design. My role was to bring their designs to life by developing a functional, seamless website that matched their vision and met the project’s goals.

Website Stack

• WordPress as the CMS
• Custom-coded front end
• Tailwind CSS
• Vanilla JavaScript, GSAP, Lenis Scroll, Barba.js

Let’s Get to Work

For most of my projects, I rely on WordPress as a CMS because it’s straightforward, user-friendly, and easy to develop on. Plus, many of my clients are already familiar with it, which helps streamline the development and content management process. While I’ve experimented with other frameworks like Nuxt, Next, and similar tools in the past, they often felt like overkill for the kinds of projects I typically work on. As a pragmatic developer, I prefer to use tools that are efficient and effective—if something works well and meets my needs, I’m happy to stick with it.

One of the first crucial steps in development for this project was implementing smooth page navigation and transitions. The website required advanced transitions, which meant eliminating the traditional page refresh that usually interrupts the user experience. To achieve this, I decided to use WordPress in combination with Barba.js. This powerful combination allows for the creation of visually stunning and highly functional websites, where the user experience is so seamless that visitors can’t easily distinguish between a WordPress site and a Single Page Application (SPA).

Homepage

Since Moxey is a film production company, the homepage was designed to focus on showcasing their video work. The main feature is a full-screen video that plays on a loop, immediately capturing the visitor’s attention and giving them a feel for Moxey’s style. Above the video, there’s a simple navigation bar, links to the latest projects, and a catchy tagline that quickly conveys the company’s message.

The project links on the homepage transform the video into a static image, as each project has its own full-screen image representation. When you hover over the link, a small animation appears with the cursor, signaling that the link is clickable. This subtle animation guides users, making it clear that they can click to learn more about the specific project.

Project Page Transition and Animation

The most complex animation happens when navigating from the homepage to a project. While there’s quite a lot going on during the transition, the main focus is on resizing the full-screen image into a 16:9 video player thumbnail, which appears on the project detail page. It’s not just about resizing the image; the goal is to create a smooth, seamless transition that connects the homepage to the project page without interrupting the flow of the site.

The homepage and project detail pages are two separate pages managed in the WordPress admin, but they needed to function as a single, cohesive experience for the user. To make this possible, I took advantage of a key feature in Barba.js: elements within the Barba container are refreshed with each page transition, while elements placed outside the container remain in the DOM even as pages change. This approach allowed me to maintain smooth transitions between the homepage and project detail views.

Here’s a simple step-by-step process of what happens:

1. Select the full-screen image of the clicked project.
2. Clone the image and append it outside the Barba container.
3. Start the Barba page transition.
4. While the transition is happening, begin resizing the selected image.
5. Change the page from the homepage to the project detail page via Barba.
6. Position the image exactly where the video player thumbnail will appear.
7. Once the transition and animations are complete, remove the cloned image from the DOM, leaving only the original video thumbnail, which now matches the resized image.

Custom Video Player and Navigation

The entire website uses Vimeo as the main streaming platform for videos. Vimeo provides its own embed player, but to be honest, it didn’t align with the creative direction of the project. The default player is quite unattractive, and its design didn’t fit the aesthetic we were aiming for. Additionally, it loads unnecessary JavaScript, which can slow down the website and negatively impact the overall performance.

After some brainstorming with Studio Oker, we decided to go for a custom-built player that would offer both a unique design and enhanced functionality. By utilizing Vimeo’s “Direct links to video files,” I was able to pull in streamable direct video links that can be easily controlled with JavaScript. This gave me the flexibility to build a custom, visually fitting video player that matched the project’s needs and helped improve both performance and the user experience.

I developed custom Play and Pause buttons for the player that move with the mouse cursor when inside the player. This adds a dynamic, interactive element to the experience. When the cursor leaves the player frame, the Play button animates smoothly to the center, while the Pause button disappears. This behavior is intentional—since the video is playing, the Pause button isn’t needed, and the goal is to allow users to watch the video without anything obstructing the view.

Video and Photo Slider

Another standout feature of the website is the combined video and photo slider. This slider integrates both video and image content, using the same custom video player as the featured video. The main idea was to create a smooth, unified experience where users can interact with both types of media in the same way. When a video is part of the slide, the player functions as expected, but when an image is displayed, the player switches to a static image mode.

I also designed and implemented custom Next and Prev buttons for easy navigation through the slider.

Work Page with Grid and List View

The Work page, which showcases all the projects, was designed with two different viewing options: grid and list. This allows visitors to choose the layout that best suits their browsing preference. The grid view displays the projects in a visually appealing, compact format, while the list view offers a more detailed, linear presentation.

The grid layout on the homepage is designed to display a featured image for each project. To add a dynamic touch, we decided that hovering over each image would reveal a short preview of the video for that particular project. This way, visitors get a quick glimpse of the project’s video content without needing to click through to the full details.

On the other hand, the list view offers more detailed information about each project, presenting a text-based overview alongside the featured media. This view is designed to give visitors a deeper understanding of the project, with key details and context. When hovering over a project in the list, a video preview appears in the center of the project, overlaying the text and allowing users to get a quick visual glimpse of the project’s content.

A nice feature of the website is that it remembers your preferred project view, even when you navigate to different pages. For example, if you switch to the list view and then visit the Contact page, when you return to the projects page, it will still display the list view, preserving your last selection.

Responsiveness

Of course, the website is fully responsive. There were various tricky things to develop and optimize, such as the homepage project hover effect and its animations, projects grid / list view hover animations, and custom player animations as well. Through some small design adjustments and creative solutions, we were able to ensure that everything functions smoothly across all devices, providing an equally engaging experience on both desktop and mobile.

Page Optimization

Page optimization is something I really enjoy, and I believe it’s crucial for the overall user experience. There’s nothing worse than seeing a slow website that takes 10 seconds to load and pulls in 50+ resources.

I’m not a fan of preloaders that take too much time and load everything on the first visit. On the other hand, lazy loading doesn’t always work as expected and can cause white spaces to appear on the page as elements are still loading while the user scrolls.

To solve this, I developed an alternative approach for loading media like images and videos. I’ve used this solution (with slight variations) across all my projects, and it has always worked well. Here’s how it works:

1. Only load the most essential elements during the first load – This includes CSS, JS, and the images or videos necessary for the homepage.
2. Show the website immediately and allow users to interact – The site is visible and functional while additional media is being loaded in the background.
3. Load the rest of the media as the user interacts with the website – As the user scrolls, clicks, or engages with the site in other ways, all the remaining media (images, videos, etc.) is loaded in the background and cached.

This approach ensures that the website feels fast, with media loading seamlessly without making the user wait during the first visit. The content is stored in the cache, ready for later use without unnecessary delays.

Additionally, I used standard optimization techniques like minifying CSS and JS, using a CDN, and caching the entire website to further improve performance.

Final Thoughts

This project was one of the most complex, yet at the same time, one of the most enjoyable to work on. Looking back on it now, with all the animations, transitions, and unique features, it’s satisfying to know that all the time and effort put into every little detail has paid off. Working with Studio Oker was an amazing experience, and their creative vision pushed me to come up with innovative and efficient solutions to bring the website to life.

Thanks for reading!