lab Home
10

Horizontal scroll — panneaux qui défilent de côté

GSAP / ScrollTrigger

Chargement de la démo…

Scrollez à l’intérieur du cadre : la section se fige et les étapes défilent.

Raconter une méthode, un parcours ou une collection comme un récit qu’on fait défiler : le visiteur garde le fil.

Intensité
Performance
Léger
Mobile
Fonctionne au doigt ; sur petit écran, prévoir 3 à 4 panneaux maximum.
Accessibilité
Défilement horizontal classique, avec aimantation sur chaque panneau.
Idéal pour
Agence / studioFormation / méthodePortfolioHôtellerie

Featured :

  1. 1.La piste glisse de toute sa largeur hors champ : x: () => -(track.scrollWidth - wrap.clientWidth)
  2. 2.Section figée le temps du défilement : scrollTrigger: { pin: true, scrub: 1, end: () => `+=${distance()}`, invalidateOnRefresh: true }
  3. 3.Animations à l’intérieur des panneaux, synchronisées sur le mouvement horizontal : containerAnimation: tween
  4. 4.Dans le lab, le cadre sert de scroller (scroller: frame) ; sur un vrai site, on retire l’option et c’est la page qui scrolle
Next