Responses by Jeppe Aaen, creative director and founding partner, Hello Monday.

Background: The purpose of this site is to showcase the wonderful work of legendary composer Alan Menken. Target audiences include Alan Menken’s fans, the press, music students and researchers.

Design core: The visual inspiration comes from piano keys and the animated movies that feature Menken’s composed works. Finding that striking balance between the musical elegance and the playfulness of the characters within the movies, the design and experience are a mix of classic and joyful. Knowing that Menken has a lot of fans all over the world, we wanted to create an experience for them where they could get their popcorn, lean back and just enjoy the very best of his work—with bonus material on the side.

New lessons: Discovering how famous Alan Menken actually is and the massive, dedicated fanbase he has were definitely breakthroughs when we were talking about the features the site needed to contain. We acknowledged what it meant to make the best experience for the fans—if we didn’t embrace the vibe within musicals and animated films, we would disappoint a lot of people.

Technology: The site is built on a stack consisting of Contentful for CMS, and Symfony for the HTML templating and routing with Stackpath CDN in front for load handling. The front end is written in TypeScript and SCSS, utilizing libraries such as GSAP by Greensock, Video.js and Vimeo, and Pixi.js. The site was designed mostly in Sketch and prototyped using both code and After Effects.

Anything else? The site uses masking animations and transitions inspired by the movies Menken composed for. Complex masking animations at 60 fps is, however, still a lot more complicated than it should be, so we tested out various techniques for implementing the masks we wanted. We went through animated CSS clipping paths, overflow: hidden, and several other tests before landing on having to use WebGL through Pixi.js for the transitions. Some of the transitions need to run at the full browser size, which—on a 5K display—isn’t doable for the most common specced laptops just yet. So we run these at a lower resolution, while upping the resolution for the other transitions that don’t span the full browser dimensions.