Apprato was recently tasked with creating advanced navigation for a client’s microsite. The client desired high-impact, fluid animations to manage the header and navigation of each webpage. Additionally, they wanted to use WordPress as a simplified content management system (CMS) to easily manage blog posts and content updates.

Initially, we considered building the entire site in WordPress. WordPress is a versatile content management system (CMS), but its animation capabilities can be somewhat limited due to several factors. The animations you can implement often depend on the theme and plugins you use.

WordPress itself is built on PHP, which runs on the server side, but most animations are handled on the client side with CSS, JavaScript, or libraries like GSAP. While WordPress can integrate these technologies, the core CMS doesn’t inherently provide advanced animation capabilities. WordPress is primarily designed for content creation and management, with its core features cantered around posts, pages, and media management—not advanced animations.

The client had a limited budget but still wanted sharp, fluid animations, making it impractical to produce the entire site using WordPress. Considering the custom nature of the navigation, required performance, and browser compatibility, we recommended creating the navigation and header using React and injecting it into WordPress.

This approach allowed us the freedom to focus on user experience, performance, and custom movement of the interactive elements. Keeping the component lightweight and ensuring the custom fluid movement of the interactivity required a lot of custom code, with minimal interaction with other animation libraries, which boosted performance.

React’s component-based structure makes it easier to manage and reuse animation logic. You can encapsulate animations within components, leading to a cleaner and more maintainable codebase.
React integrates well with popular animation libraries like Framer Motion, React Spring, and GSAP. These libraries provide powerful tools for creating complex animations, and their React-specific versions offer seamless integration.

React works well with CSS-in-JS libraries like styled-components and Emotion, which can help manage and scope styles for animations, leading to more modular and maintainable code.
The navigation was circular in style, similar to a sundial. It could be moved left or right with a click-and-drag movement, allowing users to navigate through different pages of the website. The navigation included easing in speed and behaviour, with the sundial slice resolving to the north when unclicked. Scrolling down revealed the details on the rest of the page. To revert back to the navigation sundial, the user needed to scroll to the top of the page.

The development process was particularly challenging, as we had to manage assets in different positions when the sundial was rotated (left or right). When the dial was facing north, the assets were ready to be revealed and opened, while the other assets on the dial rotated around the sundial wheel, waiting to snap open when they reached the northerly position.

To inject the navigation sundial header, we created a shell script to compile the component and linked it to a JavaScript file that WordPress could access via the frontend template.
We then injected this onto the webpage to provide the best of both worlds: performance on a budget.

There are always options when building your website. Consider what you want your standout features and functions to be, as they will dictate the technology stack you should use.

If you want advice on how to build your next website or application, reach out to Apprato, and we can help you choose the right tech stack and solution.