1x Winner of Horizon Interactive Award

Arup Sustainability Hub

Development
← All projects
Arup Sustainability Hub

This Sitecore project with ARUP is all about sustainable development and how it affects the environment. The story told by Hawkeye's Creative team featured frame by frame animations, 3D models, and animated interactions.

Scroll Trigger

I started by developing a scroll system to handle different frames based off the position of the page which affected the hero animation as well as the header states. Since time was a factor, I integrated GSAP which had a core upgrade to include their Scroll Trigger Plugin. Not only did this javascript library cover the custom system I set up, it also handled all the other animations and allowed me time to supply additional animations per Creative request.

Under Pressure

What began as a three month project for 2 developers turned into 2 weeks and 1 developer by the time I was brought on board. I had to be efficient and turn around development demos often to complete this on time. I prioritized functionality and an MVP, but was able to include the animated story that the designers wanted to show.

Awards

  • 2022 Horizon Interactive Gold award badge2022 Horizon Interactive GoldCorporate & B2B Website

Project Details

Nathaniel Hoyt
Nathaniel Hoyt
Frontend Developer

My Role

Lead developer — I led the front-end build of the animated sustainability hub, engineering a custom scroll system (later re-platformed onto GSAP ScrollTrigger) that drove the hero animation and header states, and integrating the frame-by-frame animation, 3D models, and video content. I prioritized an MVP while still shipping the full animated story the designers envisioned.

The Team

Development
Nathaniel Hoyt
Nathaniel Hoyt
Frontend Developer
DW
Darren West
QA Manager
Creative
AP
Alex Pierce
Creative Director
KM
Kiley Mabry
Associate Creative Director
CH
Ciaran Healy
Associate Creative Director
TL
Tish Loh
Creative Director
BM
Brendan McKenna
Creative Director
Platform
SCSitecore
Tech
GSGSAP
HTHTML5
JSJavaScript
SCSCSS

Let’s Talk

We all have a story to tell. Whether it’s a website, a logo, or a design, let’s help you tell that story.

Let’s Talk

Tell us about your project and we’ll get back to you.

Protected by reCAPTCHA.

Connect with us