lab Home
Demo source 02

Cover page transition — rideau en deux bandes

GSAP / Page transition

Chargement de la démo…

Cliquez un projet, puis « Retour ».

Voir l’original

Le passage d’une page à l’autre devient un moment de mise en scène, comme un rideau de théâtre.

Intensité
Performance
Léger
Mobile
Fonctionne tel quel.
Accessibilité
Fondu simple entre les pages.
Idéal pour
PortfolioArchitectureModeGalerie / photo

Featured :

  1. 1.Overlay fixe en deux rangées, fermées au repos avec transform: scaleY(0) : origine en haut pour la première, en bas pour la seconde
  2. 2.Les deux bandes se rejoignent au centre pour couvrir la grille : tl.to('.overlay__row', { scaleY: 1 }, 'start'), puis la page détail est montée derrière
  3. 3.Reveal de l’image par double translation inverse (conteneur et contenu) : startAt: { y: (i) => i ? '101%' : '-101%' }, y: '0%'
  4. 4.Titres et paragraphes découpés en lignes masquées (overflow: hidden), qui montent avec gsap.fromTo(lines, { yPercent: 101 }, { yPercent: 0, ease: 'expo' })
  5. 5.Retour : timeline miroir, les bandes se referment en scaleY: 0 à 'start+=0.6' pour rendre la grille
Next