superStudios is building a technology-led digital transformation company with a creative aspect to it. Their purpose is to develop a diversity of talent that will power, drive the new digital age economies and build an unrivalled breadth of interconnected technology and data expertise, with joined-up creativity and responsiveness at its heart.
The concept behind the brand is that they are super-charging the growth of leading digital studios, bringing together their leaders to form a ‘super studio’, one which is radically integrated and highly agile, matching and driving the pace of change and innovation necessary to implement solutions to some of the new world’s greatest challenges.
Now that there are active conversations with potential partners, there was a requirement for a more engaging web presence, which included detail on the aims of the company. As there is no work to show at this stage, they were looking to develop a sense of intrigue with the site. They had already worked with Neville Brody to conceptualise the idea for the website, as well as develop a refreshed brand/logo approach, which needed to be considered and built out as part of the deliverables for the brief. They approached me to help bring this concept to life.
The basic concept was that the site scrolls horizontally, with it loading at the start of the logotype and then being scrollable left and right as a continuous looping scroll, with letter animations triggering at certain scroll points and key text info fading in/out.
Whilst not a large scale build, there was still quite a high level of complexity to ensure the the logos would scroll infinitely and the letter animations would retrigger/reset based on the scroll. To solve this I exported the logo as a single SVG and removed any letters that needed animating. This logo was repeated twice and placed within the same container, with the width of it dynamically calculated. I then created a hidden vertical div and applied the containers width in px to it’s height. I then translated the yPos of the vertical div to the xPos of the container, using 3D transform to ensure it scrolled smoothly across all devices. Animations were triggered using a combination of the Intersection Observer API and Greensock for the more complex animations. The app was developed in HTML, Typescript and SCSS.
Quirksmode is a fully responsive Universal React Application connected to a Headless CMS designed and developed by myself, web enthusiast and all round nice guy Dave. It was created to be my Portfolio and voice to the world.
All code has been hand written from scratch using Visual Studio. All of the opinions on this site are my own and do not represent those of my employer or colleagues.
Mobile Number: 07870257474