Jan 24, 2024
Building GSAP, ASAP
It goes without saying, but well, maybe it doesn’t get said enough. Still, for us one of the fundamental aspects of the success of this project was working with amazing and talented clients like Cassie and Jack and of course, the extended GSAP crew and community. Throughout the project they were phenomenal and always encouraged us to explore more and see where we could take it.
This was undoubtedly one of the most enjoyable brand and site experiences we have worked on.
We were asked to conceive and develop a website experience that embodies and amplifies the newly created brand identity for GreenSock. The primary goal of this initiative was to demonstrate why GSAP (Formely GreenSock) is the go-to tool for animation.
GSAP's widespread use was evident, already powering over 11 million websites, many of which were award-winning.
In undertaking this project, we first aimed to lay the foundations for the brand, creating a robust platform for future development and innovation. Secondly, a key goal was to drive awareness of becoming a club GSAP member. Thirdly, we sought to position the new brand as an exciting and progressive force in the industry. And finally, we aimed to showcase the sheer creativity and versatility of the GSAP tools and its users.
“This wasn’t just another flashy site, this site had to perform too, for users new and old, and help drive business growth."
The Joy of GSAP
In our quest to build a brand experience that would truly help GSAP stand-out we took a notion about “seeing how far you could take it”, which resulted in a concept centred around “The Joy of Animation”. This fun and expressive approach meant that the design and development could focus on GSAPs transformative power and creativity through what it does best, which was just about animating anything.
Giving It Some Flair
A pivotal element of our execution was the development and introduction of a central protagonist in the brands' visual language, which we called 'Flair.' Flair is an embodiment of the spirit and capabilities of GSAP. Serving as the cornerstone of product stories and demonstrations, Flair visually showcases the versatility and dynamism of GSAP's animation platform in the best possible way.
“We created Flair to represent the spirit and capabilities of GSAP products and team"
Flair’s presence in our narrative does more than just represent the tool; it personifies the creativity and innovation that GSAP enables. Through Flair, we illustrate the seemingly boundless possibilities of animation, making each interaction not just informative but also immensely engaging.
In essence, the execution of using Flair at the forefront was a bold step in defining the brand's language. It’s a narrative tool that goes beyond mere visual appeal, becoming a functional guide that demonstrates the best of what GSAP has to offer, encapsulating the essence of innovation and creative freedom that is the beating heart of the brand.
Being True to the Brand
In the development of our brand experience, a guiding principle was to remain authentic and true to the capabilities of GSAP. This commitment meant that every animation technique we employed was a showcase of creativity and a testament to what can be practically achieved using GSAP's animation tools.
“We ensured that every animation and interaction featured on the website could be practically achieved through GSAP's tools."
This approach served dual purposes: firstly, it reinforced the integrity of the brand, ensuring that every element of the user experience was a genuine reflection of GSAP's potential. We avoided the pitfall of over-promising; every animation, every interaction demonstrated on the site is replicable by our users through GSAP.
Secondly, it served as a challenge to the ToyFight & GSAP team to explore the full breadth of GSAP's functionality. By only using the tools available within GSAP, we pushed the boundaries of what could be achieved.
Some examples to get started and play with GSAP:
Blending it Together
Eleventy (11ty) emerged as the optimal choice for our needs, providing robust build tools and the flexibility required to construct components that seamlessly integrated across the entire site. This decision allowed for a modular and scalable architecture.
In terms of styling, the website's UI was shaped using a combination of Sass and CSS variables. This combination empowered us to establish a comprehensive design system, encompassing type styles and colours. The result was a consistent and visually appealing user experience that resonates with the new GSAP brand identity.
We’re digital first design agency based in Manchester, UK. Founded in 2015.
Our ethos is anchored in the creation of experiences that feel Unmistakably Original. We believe that true originality stems from a blend of creativity, authenticity, and a deep understanding of user's needs and aspirations.
We Operate at the Centre of Strategy, Design, Technology, and Content creation.
Bringing these core areas together allows us to foster ideas and talents beyond the ordinary, turning them into something Unmistakably Original.