Animating hand-drawn assets with GSAP
To solve the challenge of fragmented communication across multiple chat apps when organizing a yearly Halloween party, I designed a central RSVP hub.
The project provided a perfect theme for a truly custom, creative exercise with quirky branding. I followed a light touch but effective wireframe-to-code workflow to bring the project to life. A key element was integrating Google Forms to bridge the gap between high-end visual storytelling and practical utility.
The final outcome combines GSAP-animated hand-drawn digital art with seamless RSVP functionality, providing our friends with a vivid introduction to the party's promised atmosphere.
View site
Ideation
The mood board above was where pulled together the visual identity and planned the layout for the site. I cross-referenced space themed imagery, colour palettes, Google Font pairings (Syne and Rajdhani) and placed in artwork that I had already started to drawer.
Layering up the assets on the mock layout allowed me to visualise how I might animate different assets with GSAP, and how these animations would interact with a responsive layout.
Going through this process, I realised that my early illustrations, while 'realistic' in their original colour scheme, weren't cohesive with the overall look and feel. I went back to the original files and recoloured them in the new colour palette.
Build
The simple requirements suited a lightweight setup, I opted for a static build using HTML, CSS, and JavaScript. I used the GSAP library to orchestrate the animations, ensuring my hand-drawn assets interacted seamlessly with the responsive layout. To add a final layer to the 'Space' theme, I integrated a found script to generate the dynamic starry background.
For the RSVP functionality, I developed a custom frontend form that integrated directly with a Google Forms backend, allowing for us to take advantage of a secure free tool without compromising the site's design.