Jul 18, 2019

Locomotive by Locomotive Wins Site of the Month June: A Case Study

Locomotive by Locomotive Wins Site of the Month June: A Case Study

Locomotive win Site of the Month for their new studio website Locomotive. Thanks for all the votes and tweets, find the winner of the Pro Plan at the end of the article. Now the Montreal based studio delve into the making of their awesome digital showcase.


With more than a decade of experience, Locomotive has become a leader in digital experiences, web design and branding. That’s not a brag, it’s a promise: to deliver tomorrow’s creative solutions — today. Our philosophy is built on people who love creating, learning and growing together, a small studio of just 25 people who form a team with ties that transcend the workplace.

A new playground

The process of building Locomotive’s new website was a real playground for the team. Its main purpose was to educate potential clients on our work and DNA — in the most effective way possible — but it needed to be more than that. It needed to be a place where we push boundaries and put technologies we have an interest in to good use. A place for inspiration. But mostly, a place where we showcase our people first and their beautiful achievements.

animated gif of the homepage
Homepage interactions

Work: Explore the agency

The experience begins by showcasing the projects we are most proud of. While a lot of fun to work on, presenting the portfolio was one of the most challenging aspects of the project. We applied a uniform structure to create personalized rich-content for each case study.

image of the homepage on an iMac computer
The Project page
Users can browse our most exciting stories and find out about our best achievements and internal projects, using a drag navigation principle

Play: Explore the culture

Everything related to our agency culture will be found in the Play grid. Users can browse our most exciting stories and find out about our best achievements and internal projects, using a drag navigation principle. A great way to add a discovery factor into the experience and incite the user to dig deeper into the content.

gif of a grid being dragged
Explore the Play grid
Image of white smart phone on black background and black smartphone on white background with the locomotive web on the screen
Mobile pages

Front-end Technologies

  • locomotive-boilerplate (using modularLoad for page transitions. It is directly included in the new boilerplate version)
  • locomotive-scroll-v2 (we're working on v3)
  • The GSAP suite (TweenMax, TimelineMax, etc) is a must-use in most of our projects and was critical throughout this website to manage all sorts of animations. One of their premium plugins ThrowProps greatly helped us to improve the drag & drop feeling (on the homepage & play grid) to achieve a smooth experience.
  • We used Three.js on a lot of pages to enhance and highlight some of our content. We internally developed a tool allowing us to quickly & easily define a 3d model’s position, lightning and scroll-related animations. For that, dat.gui.js also helped us a lot.
  • A lot of mathematical functions (such as lerp) to get a smooth feeling across the site.
  • Hammer.js
  • Management of touch & drag interactions
  • Vimeo-player API
  • Swiper
  • Native canvas (for elastic lines on page headers, and for the background of the play grid)

Home page

We used a shader to make a fluid flag effect. It’s basically the use of an image with a gradient moving on touch and between slides. The brighter the pixel, the more the vertices position is affected.

white gradient on black
Gradient sample

L.I.S.A.

We implemented Locomotive’s Interactive Super Assistant using simple technologies: Google Cloud Text to Speech API and AudioContext (Used to analyse LISA’s voice to visualize her speech in an expanding circle.

Blue square with text on top saying Hi there I am Lisa, locomotive's Interactive Super Assistant

Agency Page

We used Sprite textures for animojis

rows of emojis of lisa's face

Back-end Technologies

Our main guideline has always been a “build from scratch” approach. The technologies are reusable but the projects themselves should always start with a clean slate to ensure uniqueness. All our development is based on that philosophy. Like 90% of Locomotive’s projects, Locomotive.ca was developed with our in-house CMS / Framework: Charcoal. Built with modern PHP (on top of Slim and other great open source technologies), we started developing this tool around 10 years ago to create a leaner Content Management System that actually feels like it helps you build a fast and secure website, instead of “being in the way”. Custom models are easy to create and manage within the charcoal-admin powered interface, and the usage of a logicless templating engine (mustache) simplifies our front-end developers' job.

our designers we tasked with crafting a modular layout system composed of multiple types of content blocks, allowing for a custom layout on each case study

On our previous website, each project case study was coded by hand, each image positioned manually, and no content could be modified without the assistance of a developer… No way were we going to be doing that again! Therefore, our designers we tasked with crafting a modular layout system composed of multiple types of content blocks, allowing for a custom layout on each case study. With our charcoal-attachment package, we developed simple CMS forms for each type of content block, enabling us to create and update text, images, videos, parallax effects, background colors, 3D objects and device mockups.

Cloudflare and optimization

Considering what our analytics data said about our existing site’s visits, we obviously had to implement an aggressive caching strategy. Well, it turns out that, since our launch in June, Cloudflare saved us ~600GB of bandwidth. On top of that, we made use of our charcoal-cache package within our PHP framework for APC based caching. This allows us to easily load-once-and-reuse database data site-wide (projects, awards, job offers), or store sensitive rate-limited external API data (weather detection on L.I.S.A.).

New features for Charcoal

When we need a new Charcoal feature, we develop what we call a contrib package. For example, we used the charcoal-contrib-communicator package on Locomotive.ca to manage email communications in a standardized way. It helped out with sending notifications and confirmation emails originating from our L.I.S.A. forms. Our developers are encouraged to export any reusable functionality they create into a contrib package, thus keeping with our mentality of building things from scratch, reusing them and improving upon the previous versions.

Web stack, frameworks and tools

3d hand making a call me gesture
Contact page, 3D hand animation

Website by Locomotive

We are a forward-thinking team of designers and developers driven by passion and fueled by curiosity. With more than a decade of experience, Locomotive has become a leader in digital experiences, web design and branding. That’s not a brag, it’s a promise: to deliver tomorrow’s creative solutions — today.

You can find out more at Locomotive and follow us on Behance, Facebook, Instagram, Twitter or Vimeo.

Cheers for all your votes and tweets, @KatiaSmet wins the Pro Plan, please DM us on Twitter to get your prize!