Locomotive

Agence digitale

Le fun Retour au travail

Le fun

Retour aux articles

L’évolution du scroll chez Locomotive

La fluidité des expériences numériques proposées par Locomotive est partie intégrante de la signature de l’agence. Le scroll highjacking peut paraître à première vue une pratique à éviter, mais la manipulation du scroll permet d’explorer un large spectre de possibilités créatives pour présenter l’information. C’est aussi une façon de contrôler le parcours de lecture de l’utilisateur et de constamment récompenser la consommation du contenu au scroll.

À l’été 2016, l’équipe chez Locomotive travaillait sur la refonte du site de pomerleau.ca. Le projet était rempli de défis, et nous avions l’ambition de réaliser un site techniquement et créativement solide. À cette époque, nous travaillions avec notre locomotive-boilerplate sur beaucoup de nos projets. Nous avions conçu un système qui déclenchait des animations sur les éléments à leur apparition dans l’écran (viewport).


Frédéric Marchand, président et directeur de création, a alors demandé à aux développeurs de se pencher sur une expérience de scroll plus intéressante, avec des effets de parallax fluides et des animations. L’idée est donc venu d’utiliser un smooth scroll avec un principe de translate d’un élément conteneur⁠—et non d’un scroll classique sur le document⁠—était donc intéressante. On décide donc d’utiliser smooth-scrollbar (par idiotWu) qui nous permettra dorénavant d’obtenir rapidement un container qui est translate sur l’axe Y.

Jusqu’ici, vous me suivez?

En addition, Antoine Boulanger implémente un système d’effets parallax à l’aide d’attributs HTML tel que data-speed et data-position, que l’on retrouve toujours aujourd’hui dans la troisième itération (v3) de notre librairie.

Il est à noter que malgré l’efficacité du scroll, beaucoup de fonctionnalités sont bâties spécifiquement pour ce projet et certains éléments seront à repenser pour y extraire le code et le réutiliser.

Benjamin Roch, co-directeur technique, tente de trouver une solution sur un problème d’implémentation d’une fonction "load more", tout en tenant compte que le parallax des éléments, la valeurs de scroll devait être mise à jour sans impacter visuellement ce qui était déjà dans le viewport.

À ce moment là, on s’est demandé si on voulait vraiment ce principe sur chaque projet. Cela devenait complexe.

La naissance de locomotive-scroll

En décembre 2016, le projet Pomerleau est mis en ligne et on décide de créer le repo GitHub locomotive-scroll, avec comme but de rendre open-source notre code.


Nous avons travaillé pour rendre le tout plus abstrait, retirant des mentions et exceptions implémentées pour Pomerleau, tout en ajoutant le choix d’activer le smooth scroll ou de garder le scroll natif. À partir de là, on s’est posé quelques questions :

  • Est-ce que l’on veut des effets parallax avec un scroll natif?
  • Comment veut-on gérer les éléments fixed/sticky?
  • Comment gère-t’on l’installation pour que le code fonctionne non seulement avec notre boilerplate mais aussi dans n’importe quel autre contexte?

Deux ans et demi avec la première version (v1)

En 2017 et 2018, projet par projet, on ajuste les effets et on ajoute des options et des fonctionnalités, tout en démarrant la réflexion de la refonte de notre propre site web.

2019

Suite à des résultats de performance décevants en développant locomotive.ca, on décide de mettre sur pied une refonte du code et du fonctionnement de locomotive-scroll. L’équipe front-end décide d’abandonner smooth-scrollbar et d’essayer une librairie beaucoup plus légère, soit virtual-scroll par ayamflow.

On quittait une extension très simple d’utilisation mais très opinée pour une librairie permettant d’harmoniser toutes les valeurs de scroll selon l’interface utilisée (souris/trackpads/écrans tactiles). Quentin entame alors le développement de la v2 avec virtual-scroll, ajoute un nouveau système d’inertie et adapte les options paramétrable. Une nouvelle option de delay par élément est aussi ajouté, permettant d’ajuster le ease spécifiquement par élément. 

La deuxième version (v2) sera donc utilisée pour la refonte du site web de Locomotive.

Très peu de temps après avoir complété la v2 et après avoir fait quelques tests, nous avons pris la décision de changer le principe de base de notre librairie : plutôt qu’appliquer un transform sur un container avec beaucoup de DOM, on devrait couper ce dit container en sections et appliquer un transform sur chacune d’entre elle selon leur visibilité dans le viewport. Quentin continua donc son travail avec cet objectif en tête, et nous arrivons à une v2.1. Jérémy et Antoine continuent à peaufiner cette version et finissent par l’utiliser sur de nouveaux projets.

De son côté, cela faisait plusieurs mois qu’Antoine travaillait sur une famille de librairies JS : modular. Dans une optique d’améliorer nos processus de développement front-end, nous avons mis à jour locomotive-boilerplate vers une v2 au printemps 2019 en utilisant modularLoad, et modularJS. S’en suit le désir d’une nouvelle refonte de locomotive-scroll : jQuery abandonné, plus propre, mieux organisé, mais avec les mêmes fonctionnalités. Antoine commence donc la branch v3.

Qu'est-ce qui s'en vient?

Après un mois de travail en parallèle avec nos projets en cours, nous publions la v3 qui nous convient bien plus que les versions précédentes. Accompagnée d’une page démo conçue par Louis Paquet, on vous présente notre librairie locomotive-scroll : plus stable, optimisée, plus simple à intégrer et enfin sur npm.

Retour aux articles
L’évolution du scroll chez Locomotive Locomotive Scroll, le bon outil pour mon projet? C'est hot, 2ieme édition 500 jours plus tard, My Better Normal 6 piliers de la culture de travail chez Locomotive Pourquoi nous n’utilisons pas de frameworks front-end à Locomotive? 7 façons d'améliorer la communication avec le client C'est hot, 1re édition 3 choses que votre concepteur UX peut apprendre de votre psy, style Locomotive Trois fois de suite, Locomotive est couronnée l'agence de l'année Locomotive prend d'assaut le stade IGA et remporte les honneurs au concours Idéa La révolution de l'espace de travail tel que nous le connaissons Puis-je te dire bravo? Locomotive couronnée Agence de l'année pour une deuxième année consécutive Analyse d'image et machine learning avec Google Vision API Réalité augmentée sur le web, wut? Revivez le Parté of the Year de Locomotive Les p'tits déjs Loco La zoothérapie au bureau Locomotive remporte le prix Agence de l'année Journée tempête et ski de fond Locomotive en mode avion Comment bâtir une équipe de rêve et la garder? Un bureau haut en couleurs saisonnières Les vendredis sous le soleil d'été Une équipe de rêve pour Locomotive
À propos de Locomotive À propos de Locomotive
C H O O C H O O