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.
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.
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.
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.