25th November 2019

Animation on the Web: Records Bars Header.

by kota

Introduction.

The use of motion in web design is on the rise and here to stay, from subtle hover effects to full-page transitions, web animation is everywhere. It has become a fundamental aspect of any modern website, with the intention to increase usability and spark a user’s visual interest.

Web animation in use.

At KOTA we understand the importance motion can have on a website and carefully consider the ways in which it can reinforce a brands personality and engagement. One example would be our recent work with Rocket Leisure, a hospitality group specialising in live music, cocktails & pizzas. We were tasked with redesigning their current four venues websites using a multisite set up (Venn Street Records, Old Street Records, Northcote Records and Eastcheap Records). As well as incorporating unique elements that make up their eclectic interior, we also wanted a ‘wow’ moment when landing on the homepage header.  What we decided was to create a homepage that would fully immerse the user into experiencing the bars as if they were there themselves.

Using a parallax technique we wanted to create a 3D effect on scroll where it gave the impression at being in the middle of the crowd at one of the venues looking at a band onstage. This would then be rolled out across each venue, with a different environment and band for each, whilst using the same header effect. Motion played a key role in accomplishing this goal, using a parallax scroll and “fake” 3D effect on mouse movement we were able to achieve an interactive header that brings to life the crowd and musical performers within each venue.

The Technique.

The header we created was achieved by constructing a composition from hi-res photography supplied by the client, making sure to get the correct mixture of people and reactions in the crowd for the venue being promoted. Splitting the composition into its foreground, middle ground and background elements meant we were able to control how each layer animates. In this case, the foreground was the closest section of the crowd, the mid was the middle part of the crowd and the background was the act on stage and the rest of the venue’s interior.  Once we had cut out the layers we were able to mock up an animation in Adobe After Effects, where a mixture of using layer distances from the camera and the distance a layer moves when the camera pans, creates the desired effect. This was an essential part of the process, allowing us to quickly demonstrate to our development team how we wanted the composition to animate. The development team then translated the animation prototype into code within the build, triggering the desired effect on lateral mouse movement and on user scroll down into the rest of the homepage content.

Conclusion.

Although implementing web animation can be time-intensive, it is a great way to engage users and deliver the ‘wow’ factor when browsing a website. Here at Kota, in both our Dev and Design teams, we embrace new design trends and technologies to constantly push ourselves and the websites we craft.

Click here to read the case study.


Interested in creating a great animated website or video? Call the KOTA studio on +44(0)20 3951 0562.

We are a Creative Digital Agency based in Clerkenwell London, specialising in Creative Web Design, Web Development, Branding and Digital Marketing. We are also WordPress Content Management System experts.