After the digital agency where I work rebranded from iStrategyLabs to ISL and moved into a new swanky, new, office, we needed to do something about our 4 year old website. I built interactive case studies to highlight ISL's best projects, honed performance so that all the showcased media didn't destroy load times, and designed animations to delight and demonstrate the company's quirkiness.

We wanted a lot of animation on the site to help make the experience feel more special, organic, and clever. I followed disney's 12 principles of animation as much as possible in designing and implementing animation on the site.

Using a custom easing to apply a sense of weight, accelleration and followthrough was crucial.

To aid this, I built a sass based animation micro-framework, using loops to generate animation stagger times, and relying on toggling a master class on a container to trigger animations in sequence. Ideally I would have used something like GSAP, but we wanted to keep our dependencies as minimal as possible for performance.

If a picture is worth 1,000 words then something interactive...is worth...approx...a million billion words. To this end ISL wanted to highlight its most impressive projects with interactive case studies.

ISL uses a lot of 3d design in executing pysical builds. My mind immediately went to how we could sprinkle WebGL throughout to give people a peek into the prototyping stage.

While front end development was my responsibility for the site at large, every developer at ISL pitched in on case studies, using them as an opportunity to express ourselves and show pride for our work.

Optimizing load performance was a major challenge for ISL.co. The combination of showcasing so much photo and video content, and the constraint of using wordpress meant that snappy load times was always going to be difficult.

That said, ISL.co is faster than all its competitors with an average time to first paint of 2.2 seconds. We used aggressive minification, gzipping, and some clever caching tricks to get the times down. We didn't quite meet our budget, but we feel good about coping with the challenges of the project.

We knew the experience would fall flat on its face if all the animations were slow or janky, so a great deal of emphasis was placed on optimizing animation performance. I wrote a post on optimizing animation performance on the site, go ahead and check it out if you're curious!