Growing Moxey: A Behind-the-Scenes Have a look at the Course of

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

Right now, I’d like to take a more in-depth take a look at the event course of behind one of many initiatives I accomplished just a few months in the past — Moxey.no.

This web site is the results of an excellent collaboration with Studio Oker, primarily based in Norway. They dealt with the visible facet of the mission, offering sturdy artistic course and net design. My function was to convey their designs to life by creating a purposeful, seamless web site that matched their imaginative and prescient and met the mission’s targets.

Web site Stack

• WordPress because the CMS
• Customized-coded entrance finish
• Tailwind CSS
• Vanilla JavaScript, GSAP, Lenis Scroll, Barba.js

Let’s Get to Work

For many of my initiatives, I depend on WordPress as a CMS as a result of it’s simple, user-friendly, and simple to develop on. Plus, lots of my purchasers are already accustomed to it, which helps streamline the event and content material administration course of. Whereas I’ve experimented with different frameworks like Nuxt, Subsequent, and comparable instruments prior to now, they typically felt like overkill for the sorts of initiatives I usually work on. As a practical developer, I choose to make use of instruments which might be environment friendly and efficient—if one thing works properly and meets my wants, I’m comfortable to keep it up.

One of many first essential steps in growth for this mission was implementing clean web page navigation and transitions. The web site required superior transitions, which meant eliminating the standard web page refresh that normally interrupts the consumer expertise. To realize this, I made a decision to make use of WordPress together with Barba.js. This highly effective mixture permits for the creation of visually gorgeous and extremely purposeful web sites, the place the consumer expertise is so seamless that guests can’t simply distinguish between a WordPress web site and a Single Web page Software (SPA).

Homepage

Since Moxey is a movie manufacturing firm, the homepage was designed to deal with showcasing their video work. The principle characteristic is a full-screen video that performs on a loop, instantly capturing the customer’s consideration and giving them a really feel for Moxey’s type. Above the video, there’s a easy navigation bar, hyperlinks to the most recent initiatives, and a catchy tagline that shortly conveys the corporate’s message.

The mission hyperlinks on the homepage rework the video right into a static picture, as every mission has its personal full-screen picture illustration. If you hover over the hyperlink, a small animation seems with the cursor, signaling that the hyperlink is clickable. This delicate animation guides customers, making it clear that they will click on to be taught extra in regards to the particular mission.

Undertaking Web page Transition and Animation

Probably the most complicated animation occurs when navigating from the homepage to a mission. Whereas there’s rather a lot happening through the transition, the primary focus is on resizing the full-screen picture right into a 16:9 video participant thumbnail, which seems on the mission element web page. It’s not nearly resizing the picture; the aim is to create a clean, seamless transition that connects the homepage to the mission web page with out interrupting the move of the location.

The homepage and mission element pages are two separate pages managed within the WordPress admin, however they wanted to operate as a single, cohesive expertise for the consumer. To make this doable, I took benefit of a key characteristic in Barba.js: parts throughout the Barba container are refreshed with every web page transition, whereas parts positioned outdoors the container stay within the DOM whilst pages change. This strategy allowed me to keep up clean transitions between the homepage and mission element views.

Right here’s a easy step-by-step means of what occurs:

1. Choose the full-screen picture of the clicked mission.
2. Clone the picture and append it outdoors the Barba container.
3. Begin the Barba web page transition.
4. Whereas the transition is occurring, start resizing the chosen picture.
5. Change the web page from the homepage to the mission element web page through Barba.
6. Place the picture precisely the place the video participant thumbnail will seem.
7. As soon as the transition and animations are full, take away the cloned picture from the DOM, leaving solely the unique video thumbnail, which now matches the resized picture.

Customized Video Participant and Navigation

Your complete web site makes use of Vimeo as the primary streaming platform for movies. Vimeo offers its personal embed participant, however to be trustworthy, it didn’t align with the artistic course of the mission. The default participant is sort of unattractive, and its design didn’t match the aesthetic we had been aiming for. Moreover, it masses pointless JavaScript, which might decelerate the web site and negatively impression the general efficiency.

After some brainstorming with Studio Oker, we determined to go for a custom-built participant that will provide each a novel design and enhanced performance. By using Vimeo’s “Direct hyperlinks to video information,” I used to be capable of pull in streamable direct video hyperlinks that may be simply managed with JavaScript. This gave me the flexibleness to construct a {custom}, visually becoming video participant that matched the mission’s wants and helped enhance each efficiency and the consumer expertise.

I developed {custom} Play and Pause buttons for the participant that transfer with the mouse cursor when contained in the participant. This provides a dynamic, interactive aspect to the expertise. When the cursor leaves the participant body, the Play button animates easily to the middle, whereas the Pause button disappears. This conduct is intentional—for the reason that video is enjoying, the Pause button isn’t wanted, and the aim is to permit customers to look at the video with out something obstructing the view.

Video and Photograph Slider

One other standout characteristic of the web site is the mixed video and photograph slider. This slider integrates each video and picture content material, utilizing the identical {custom} video participant because the featured video. The principle concept was to create a clean, unified expertise the place customers can work together with each kinds of media in the identical method. When a video is a part of the slide, the participant features as anticipated, however when a picture is displayed, the participant switches to a static picture mode.

I additionally designed and carried out {custom} Subsequent and Prev buttons for simple navigation by means of the slider.

Work Web page with Grid and Listing View

The Work web page, which showcases all of the initiatives, was designed with two totally different viewing choices: grid and record. This permits guests to decide on the format that most closely fits their shopping desire. The grid view shows the initiatives in a visually interesting, compact format, whereas the record view gives a extra detailed, linear presentation.

The grid format on the homepage is designed to show a featured picture for every mission. So as to add a dynamic contact, we determined that hovering over every picture would reveal a brief preview of the video for that exact mission. This manner, guests get a fast glimpse of the mission’s video content material with no need to click on by means of to the total particulars.

Alternatively, the record view gives extra detailed details about every mission, presenting a text-based overview alongside the featured media. This view is designed to offer guests a deeper understanding of the mission, with key particulars and context. When hovering over a mission within the record, a video preview seems within the middle of the mission, overlaying the textual content and permitting customers to get a fast visible glimpse of the mission’s content material.

A pleasant characteristic of the web site is that it remembers your most popular mission view, even while you navigate to totally different pages. For instance, in the event you swap to the record view after which go to the Contact web page, while you return to the initiatives web page, it should nonetheless show the record view, preserving your final choice.

Responsiveness

In fact, the web site is absolutely responsive. There have been varied difficult issues to develop and optimize, such because the homepage mission hover impact and its animations, initiatives grid / record view hover animations, and {custom} participant animations as properly. By some small design changes and artistic options, we had been ready to make sure that all the pieces features easily throughout all units, offering an equally participating expertise on each desktop and cellular.

Web page Optimization

Web page optimization is one thing I actually take pleasure in, and I imagine it’s essential for the general consumer expertise. There’s nothing worse than seeing a gradual web site that takes 10 seconds to load and pulls in 50+ assets.

I’m not a fan of preloaders that take an excessive amount of time and cargo all the pieces on the primary go to. Alternatively, lazy loading doesn’t at all times work as anticipated and may trigger white areas to seem on the web page as parts are nonetheless loading whereas the consumer scrolls.

To unravel this, I developed another strategy for loading media like pictures and movies. I’ve used this resolution (with slight variations) throughout all my initiatives, and it has at all times labored properly. Right here’s the way it works:

1. Solely load probably the most important parts through the first load – This consists of CSS, JS, and the pictures or movies needed for the homepage.
2. Present the web site instantly and permit customers to work together – The positioning is seen and purposeful whereas further media is being loaded within the background.
3. Load the remainder of the media because the consumer interacts with the web site – Because the consumer scrolls, clicks, or engages with the location in different methods, all of the remaining media (pictures, movies, and many others.) is loaded within the background and cached.

This strategy ensures that the web site feels quick, with media loading seamlessly with out making the consumer wait through the first go to. The content material is saved within the cache, prepared for later use with out pointless delays.

Moreover, I used commonplace optimization strategies like minifying CSS and JS, utilizing a CDN, and caching all the web site to additional enhance efficiency.

Closing Ideas

This mission was some of the complicated, but on the similar time, some of the pleasing to work on. Wanting again on it now, with all of the animations, transitions, and distinctive options, it’s satisfying to know that on a regular basis and energy put into each little element has paid off. Working with Studio Oker was an incredible expertise, and their artistic imaginative and prescient pushed me to provide you with progressive and environment friendly options to convey the web site to life.

Thanks for studying!