Goya Design Studio

When they returned they presented me with an ambitious vision for the site – a richly illustrated full-page concept replete with sweeping graphical transitions and a variety of animated elements. I knew I was going to have to pull out all the stops to make it a reality.

Lacking the time to produce a completely custom-animated experience, I cast around for some ways we could leverage existing technology to save time. An early decision was that we would try to retain some degree of document-based layout and flow, ultimately using native scrolling to move content in and out of the viewport rather than using bespoke positioning and animation throughout. We could use browser APIs to trigger animations and other state changes when certain content was scrolled into view, and I decided to make use of the relatively new CSS Scroll Snap feature to guide scrolling from one full-size “slide” to the next.

Using CSS fixed position to lock background elements in place regardless of scrolling, I started to build up a depth of illustration and content layers that began to approach the fully animated concepts I’d been shown. We needed a “sky” component with several cloud layers that would transition between different states for “dusk”, “dawn” and so on, smoothly moving from one to another depending on which content slide was being scrolled into view. Various flourishes were added, like a lens-flare element and a moon that rises in the “dusk” state.

Above this backdrop came the content, which needed to transition in and out as it was scrolled to. Accompanying the crucial first content slides were three animated elements that had been put together by Goya’s illustrators, and I really had to empty my bag of tricks in order to find a way to execute these. At first glance it seemed the animations would require some sort of transparent video (not widely supported by major browsers, so a non-starter), but I was able to break them down into their constitutent parts and bring them to life through a combination of static PNG images, CSS animation, Airbnb's Lottie animation rendering library, and the little-known Animated PNG (APNG) file format.

APNG allows a GIF-like playback of animation frames, but supports full alpha transparency and wide-gamut colour palettes instead of GIF’s rough edges and limited colours. It enjoys surprisingly good browser support; the only downside is that playback is not controllable and file sizes can quickly balloon to impractical levels. I had to get creative with these limitations and in the end two out of the three animation pieces made use of APNG elements combined with the other techniques mentioned.

As well as wrestling with esoteric file formats I also encountered plenty of browser bugs related to the CSS Scroll Snap feature, and quite a bit of effort was put in to working around those and trying to create a reliable and rich experience cross-browser. Overall though I’m delighted with the results and I’m really excited to help launch Goya on their journey – and I hope I’ll be back to grow this microsite into a more substantial portfolio for them in the near future.