Following on from the success of the Kairos Media project, I was brought back once again to develop the group website for Kairos that arches over several subsidiary companies.

Similar to the Kairos Media site this website is powered by a Nuxt frontend and a Prismic backend. Since I talk about the ins and outs of Nuxt and Prismic in the Kairos Media case study, I'll describe some of the more interesting points of development in this project.

The vast majority of the content on each of the pages on the site has been built using Prismic's slice functionality. This gives Kairos' internal marketing team the power to freely add and update content across the site using a series of "slices" (components).

A challenge

One of the more interesting and challenging areas of this project was the animated chevrons that you see on page load and during page transitions on the hero component. There wasn't a requirement to make these animated from the brief, however I did it to add a bit of life to the pages as they loaded and transitioned. The chevrons were animated on SVGator and exported with the inline SVGator player. I have previously used Lottie but wanted to get to know another tool to evaluate the two. I would definitely say the Lottie player appears more performant in real world use cases and seems to have a bit of a community behind it, as opposed to a full commercialised tool like SVGator. It's also free.

The challenging part with the animated chevrons was handling when they should start playing and how to load them in such away that minimised the risk of them flashing in on page load. They are inline SVGs however they require the inline SVGator player to have finished parsing before they can start playing. There is a paid for player on SVGator that you can use that would have easily sped up the loading time. However the fact there is a free tool available, Lottie, I refused to pay for it and made as many tweaks as possible to get the SVGs and the inline player loading as fast as possible. The chevrons start playing when the page initially loads, on every page transition, when the side menu opens and when the contact menu opens. The management of the play state with these transitions and interactions was a bit of a handful sometimes. I have nothing but admiration for developers who work on sites that have animations 10x more complex than this.

Closing thoughts

It was fantastic to once again to get the opportunity to do a piece of work for a sky rocketing agency on the side that allowed me the opportunity to turbo charge my knowledge of the Nuxt Vue framework and the headless CMS Prismic. I felt a lot more comfortable working on this site this time as solid experience on the previous Kairos Media and Turopium sites gave me the foundations I needed for Nuxt and Prismic. With this I was able to take things even further and gain more understanding of the framework and CMS and the communities that surround them.