About Code Food Work

RBG for Good

Date: September 2018 Client: Rock the Vote Role/Team: Developer Press: Ad Age, Campaign US SEE IT LIVE (Full Experience on Mobile)
Tool(s) Used:
  • JavaScript – Vanilla, ES6
  • ThreeJS
  • GSAP
  • SVG Animation
  • SCSS/CSS – Flexbox
RBG For Good Monitor

Firstborn created a mobile WebAR experience, "RBG for Good", for National Voter Registration Day on Sept. 25. Instead of telling American citizens to vote through Rock the Vote (because if you haven't heard, YOUR VOTE MATTERS), this experience lets users to have Justice Ruth Bader Ginsburg right from their smartphone. What is unique about this AR project is that people do not need to download anything to experience it. The experience can be accessed on a browser.

RBG For Good Loading #1 RBG For Good Loading #2 RBG For Good Loading #3

My role as a developer was to finish the landing page for both mobile and desktop in 2 days including the QA and testing. Mobile version has more complicated features such as a slider indicator and SVG shutter animation. A slider indicator was used during waiting time for our 3D models to load. We displayed an introduction to our game as the waiting indicator.

Since the desktop version is a simple static single page, I also kept the mobile version as a single page, but used fixed position for the slider indicator to give the illusion that what the user is seeing is separate from its initial landing page.

Our Technical Director suggested, "It would be cool if we had a camera shutter animation as a transition from the slider to the WebAR experience." Having read SVG Animations by Sarah Drasner, I took this moment as an opportunity to apply what I have learned from the book in this project. First, I drew a vector closed camera shutter state (the end frame) in Illustrator and then applied transform-origin to create an opened shutter state in GSAP. By having both the initial (opened shutter) and the ending frame (closed shutter), I was able to create a shutter animation using TweenMax's fromTo.

When I had some free time at work after the site had already launched, I replaced the static hero image on the desktop version with the 3D model using ThreeJS' GLTFLoader. Our 3D technical artist had already provided multiple animations within the gltf file, so it was straight forward to implement it. I wanted users to play with our 3D Justice Ginsburg model by clicking and dragging the model across the screen.

See it live on https://rbgforgood.com