Même si j’ai personnellement une préférence pour ScrollTrigger, sachez qu’il est également possible de réaliser tout ce que nous avons fait jusqu’ici dans ce projet avec un plugin JQuery: Waypoints. C’est ce que j’ai utilisé pour mon projet Du Beurre ou des canons. Dans quel cas, il faudra ajouter le CDN de JQuery et celui de Waypoints dans le <head>. Après quoi, le script ressemble à ceci:

$('.ch1').waypoint(function(direction) {   //.ch1 est une classe css
  		if (direction === 'down') {

			map.flyTo([-300,425], 3);
			animate: "true";
			duration: 4;
  						}
		}, { offset: '40%' });   //pourcentage de la hauteur de la fenêtre. il existe d'autres options:http://imakewebthings.com/waypoints/api/offset-option/

Et si vous voulez que l’animation se fasse dans les deux sens, au lieu d’onEnterBack dans ScrollTrigger, vous pourriez écrire:

			if (direction === 'up') 

			map.flyTo([-200,325], 3);//les coordonnées précédentes
			animate: "true";
			duration: 2;
							}
		}, { offset: '40%' });

Vous remarquerez que nous n’avons pas beson ici de la arrow function (=>).

Waypoints fonctionne ici aussi bien que ScrollTrigger, mais je trouve la documentation pour ce dernier plus facile à trouver et, combiné à GSAP, les possibilités sont plus intéressantes ou du moins plus facilement réalisables.