Imagined Futures for Gucci, Chapter 01

Building an interactive effect to lead users into a world designed by Gucci

FARFETCH is a global fashion retail platform: selling products from luxury boutiques and brands around the world.

View the experience

A reactive, spinning portal effect

FARFETCH approached us with a request to build a distortion effect as a transition into an imaginative retail world. The effect would lead users into a digital landscape built in partnership with global fashion brand, Gucci, acting as a worthy introduction to a collage of rich imagery and products.

The interactive campaign would allow users to navigate through a collaged backdrop, peppered with clothing and accessories – an “imagined future” curated by different collaborators. Users would first encounter a landing page with four static entry images. These images needed to distort as users hovered over them, eventually clicking to enter. FARFETCH’s team provided us with a static example of the desired distorted effect. Our job was then to find a creative solution to create an interactive experience to match their request.

Spiral manipulation GCSE maths

We began by searching through an effects library for the desired spiral effect. Once we found what we needed, we set to work manipulating the spirals’ complex animation.

For each of the four static images, we built two opposing spirals – one rotating clockwise, the other anticlockwise. We then added a timer to the rotations to ensure that as users hovered over the image, the spiral would only spin in one direction for a certain amount of time. It would then bounce back and spin the other way, repeating this process in perpetuity until users clicked through to the next page. Randomising the spin timings and spiral intensity meant unlocking some GCSE algebra — understanding how to programme the different variations so that the effect felt as organic and random as possible.

Cerebral and visual victory

The complexity of the programming the spirals’ spin patterns was this project’s biggest challenge. In order for the effect to feel intuitive and in harmony with users’ behaviours, we programmed the spinning to freeze as users hovered away from the image, beginning to spin again from the exact same position as they left it when their curser eventually returned to the image. We also made sure that the spin velocity randomised on each page refresh. In the end, creating the spirals, programming their timings and automating their intensities took two weeks and a load of brain power to achieve. When our heads were not buried deep inside this vortex, we focused on ensuring the webpage would work in its eight languages, including Chinese, Japanese and Korean.

Images within the digital experience were created by collage artist — Seana Gavin

Kind words from the client

wearegoat have worked with me to build multiple executions for our platform. Our projects have ranged from single microsites to a bespoke content management system for enhanced product listing pages. I have always found them to be fantastically diligent in their output, incredibly insightful when planning how to execute projects and hugely responsive when moving forward with builds. They are hands down my go-to team of developers and I haven’t been able to give them a challenge that they haven’t managed to tackle.

Art Editor at leading global fashion retailer