Aller au contenu

GSAP : ScrollTo

L'essentiel en 3 points

  1. ScrollTo fait défiler la page jusqu'à un élément ou une position, avec une durée et un ease que vous choisissez.
  2. Dans un récit : un sommaire, ou un bouton « chapitre suivant », qui amène le visiteur au bon endroit en douceur.
  3. Le CSS d'abord : pour un simple lien vers une ancre, scroll-behavior: smooth suffit. ScrollTo sert quand vous voulez contrôler la durée, l'ease ou le décalage.

Votre récit doit utiliser au moins une extension de GSAP (autre que ScrollTrigger), au moins une fois par équipe. Choisissez celle qui sert votre histoire.

Ce que ça fait

Cliquez sur un numéro : la page défile jusqu'au chapitre.

Installer

Depuis GSAP 3.13, toutes les extensions sont gratuites, sur le même CDN que GSAP. Si un tutoriel ou une ancienne page parle du « Club GSAP » payant ou de gsap-trial, c'est périmé.

  1. Dans index.html, ajoutez la balise de l'extension après celle de GSAP, et avant main.js :

    <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollToPlugin.min.js"></script>
<script type="module" src="js/main.js"></script>

  2. Dans main.js, enregistrez-la une fois, avec ScrollTrigger :

    gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);

Comme ScrollTrigger, l'extension est ensuite disponible dans tous vos modules de chapitre, sans import.

Un exemple trouvé ailleurs? Vérifiez sa version

Toutes les démos de cette page sont en GSAP 3. Sur le web, beaucoup d'exemples sont encore en GSAP 2, qui n'est pas entièrement compatible. Comment reconnaître du GSAP 2.

Le principe

On anime le défilement de la fenêtre (window), vers un sélecteur :

gsap.to(window, {
  duration: 1,
  scrollTo: "#ch-3",
  ease: "power2.inOut",
});

scrollTo accepte aussi un nombre de pixels (scrollTo: 500) ou un objet, pour plus de réglages.

Avec un objet : les options

gsap.to(window, {
  duration: 1,
  scrollTo: {
    y: "#ch-3",
    offsetY: 80,   // s'arrête 80 px plus haut : la place du menu
  },
});
Option Ce qu'elle fait
y La cible verticale : un sélecteur, un élément, ou un nombre de pixels. "max" : tout en bas.
x La même chose, à l'horizontale.
offsetY S'arrête un peu avant la cible. Pratique si un menu fixe cache le haut de la section.
autoKill Arrête l'animation si le visiteur défile lui-même pendant ce temps.

Dans votre récit : un sommaire

Chaque bouton du sommaire indique son chapitre dans un attribut data-cible :

<nav class="sommaire">
  <button data-cible="#la-foret">La forêt</button>
  <button data-cible="#la-maison">La maison</button>
</nav>

const boutons = document.querySelectorAll(".sommaire button");

boutons.forEach((bouton) => {
  bouton.addEventListener("click", () => {
    gsap.to(window, {
      duration: 1,
      scrollTo: bouton.dataset.cible,
      ease: "power2.inOut",
    });
  });
});

Le mouvement réduit

Un long défilement automatique peut donner le vertige. Avec le mouvement réduit, allez directement au chapitre : duration: 0.

const reduit = window.matchMedia(
  "(prefers-reduced-motion: reduce)"
).matches;

gsap.to(window, {
  duration: reduit ? 0 : 1,
  scrollTo: bouton.dataset.cible,
});

Avec des sections épinglées

Une section épinglée par ScrollTrigger ajoute de l'espace dans la page. ScrollTo en tient compte : il amène au bon endroit, même après une scène épinglée.

Références