The Evolution of Scrolling at Locomotive
The fluidity of the digital experiences offered by Locomotive is an integral part of the agency’s signature. Scroll highjacking may at first seem like a practice to be avoided, but manipulating the scroll allows you to explore a wide spectrum of creative possibilities for presenting information. It’s also a way of controlling the user's reading journey and constantly rewarding scrolling content consumption.
In the summer of 2016, the Locomotive team was working on the redesign of the pomerleau.ca site. The project was full of challenges, and we had the ambition to achieve a technically and creatively sound site. At that time, we were working with our locomotive-boilerplate on a lot of our projects. We had designed a system that triggered animations on items as they appeared on the screen (viewport).
Frédéric Marchand, president and creative director, then asked the developers to look at a more interesting scrolling experience, with fluid parallax effects and animations. The idea therefore arose of using a smooth scroll with a principle of translating a container element — and not a classic scroll on the document — was therefore interesting. We decided to use smooth-scrollbar (by idiotWu) which will now allow us to quickly obtain a container that is translated on the Y axis.
So far, are you following me?
In addition, Antoine Boulanger, front-end developer, implements a parallax effects system using HTML attributes such as data-speed and data-position, which we still find today in the third iteration (v3) from our library.
It should be noted that despite the effectiveness of the scroll, many features are built specifically for this project and some elements will have to be rethought to extract the code and reuse it.
The birth of locomotive-scroll
In December 2016, the Pomerleau project went live and we decided to create the GitHub locomotive-scroll repo, with the aim of making our code open-source.
We worked to make everything more abstract, removing mentions and exceptions implemented for Pomerleau, while adding the choice of activating the smooth scroll or keeping the native scroll. From there, we asked ourselves a few questions:
- Do you want parallax effects with a native scroll?
- How do you want to manage the fixed / sticky elements?
- How do we manage the installation so that the code works not only with our boilerplate but also in any other context?
Two and a half years with the first version (v1)
In 2017 and 2018, project by project, we are adjusting the effects and adding options and features, while starting to think about the redesign of our own website.
Following disappointing performance results while developing locomotive.ca, we decided to redesign the code and operation of locomotive-scroll. The front-end team decides to abandon smooth-scrollbar and try a much lighter library, namely virtual-scroll by ayamflow.
We left a very easy to use but very opinionated plugin for a library allowing to harmonize all the values of scroll according to the interface used (mouse / trackpads / touch screens). Quentin then begins the development of v2 with virtual-scroll, adds a new inertia system and adapts the configurable options. A new element delay option is also added, allowing the ease to be adjusted specifically by element.
Very soon after completing v2 and after doing some tests, we made the decision to change the basic principle of our library: rather than applying a transform on a container with a lot of DOM, we should cut this saying container in sections and apply a transform on each of them according to their visibility in the viewport. Quentin therefore continued his work with this goal in mind, and we come to v2.1. Jérémy and Antoine continue to refine this version and end up using it on new projects.
For his part, Antoine had been working on a family of JS libraries: modular for several months. In an effort to improve our front-end development processes, we updated the locomotive-boilerplate to a v2 in spring 2019 using modularLoad, and modularJS. There follows the desire for a new overhaul of locomotive-scroll: jQuery abandoned, cleaner, better organized, but with the same functionality. Antoine therefore starts the v3 branch.
After a month of work in parallel with our current projects, we are releasing v3 which suits us much more than the previous versions. Accompanied by a demo page designed by Louis Paquet, here is our locomotive-scroll library: more stable, optimized, easier to integrate and finally on npm.