superStudios

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 Concept

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.

The Requirements

• The copy would have at least three or four messages to maintain interest and discovery while scrolling
• A contact section e.g. ‘for further information at info@superstudios.co
• For mobile the screen will be vertical and the scale reduced accordingly
• The site can be hard coded as there is no need to update the text at the moment
• The navigation will need to allow the user to scroll left, right and zoom

The Solution

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.

My Role

• Liaising with Client and Key Stakeholders
• Reviewing UX/Designs
• Scoping/Estimations
• Full Stack Developer