lab Home
Demo source 03

Expanding rounded menu — barre arrondie qui se déploie en plein écran

GSAP / Menu

Chargement de la démo…

Cliquez « Menu » dans la barre.

Voir l’original

Un menu qui s’ouvre comme une scène : la navigation devient une partie de l’expérience.

Intensité
Performance
Léger
Mobile
Idéal sur mobile : c’est le menu plein écran naturel.
Accessibilité
Le menu apparaît directement, sans déploiement.
Idéal pour
Restaurant / barHôtellerieAgenceMarque lifestyle

Featured :

  1. 1.Barre de menu en border-radius: 2rem, le panneau de contenu est caché dessous avec transform: translateY(-100%) dans un wrapper en overflow: hidden
  2. 2.Une seule timeline en pause, jouée à l’ouverture et rembobinée à la fermeture : gsap.timeline({ paused: true, defaults: { duration: 1.2, ease: 'power4.inOut' } })
  3. 3.Image de couverture révélée par double translation inverse, avec un léger dézoom du wrapper : startAt: { scale: 1.1 }, scale: 1
  4. 4.Parallaxe du contenu derrière : images et titres partent en sens opposés, y: (i) => `${i % 2 === 0 ? -20 : 20}%`
  5. 5.Le panneau descend à addLabel('menu', 0.5), puis tagline et liens sociaux remontent de y: '400%' ; fermeture via menuTimeline.reverse(0)
Next