---
name: gsap-patterns
description: Patterns GSAP copy-paste testés par registre pour les maquettes Skypeo. Utiliser quand il faut implémenter les 3 mouvements ambiants obligatoires (ticker, élément ambiant, signal hero), un effet signature de registre (path qui se trace, blob qui morph, signature manuscrite, ligne ECG), ou une animation scroll-driven (ScrollTrigger, SplitText, Flip, DrawSVG, MorphSVG). Ne jamais réinventer — piocher dans les patterns.
---
# gsap-patterns — Patterns GSAP par registre
## Objectif
Fournir des patterns GSAP **prêts à coller** dans une maquette single-file, organisés par registre. Chaque pattern est :
- Autonome (HTML + CSS + JS, à insérer dans `index.html`)
- Testé dans le contexte Skypeo
- Accompagné d'un paramétrage clair
- Wrappé dans `@media (prefers-reduced-motion: no-preference)`
## Import GSAP (toujours la même base)
Dans `` de chaque maquette :
```html
```
Plugins optionnels (ajouter seulement si utilisés) :
```html
```
En JS, au début du script :
```js
gsap.registerPlugin(ScrollTrigger);
// + autres plugins selon besoin
```
Wrapper toutes les animations dans :
```js
if (matchMedia('(prefers-reduced-motion: no-preference)').matches) {
// ici les animations
}
```
---
## Patterns universels (valables tous registres)
### Ticker / marquee métier
Obligatoire sur chaque maquette. Vocabulaire métier spécifique, jamais générique.
```html
Charpente · Ossature bois · Toiture ·
Bardage · Extension · Rénovation ·
Charpente · Ossature bois · Toiture ·
Bardage · Extension · Rénovation ·
```
```css
.ticker { overflow: hidden; white-space: nowrap; }
.ticker__track { display: inline-flex; gap: 2rem; will-change: transform; }
```
```js
// Animation continue, pas de ScrollTrigger
gsap.to('.ticker__track', {
xPercent: -50, // -50% car le contenu est dupliqué
duration: 30, // vitesse : 20-40s selon longueur
ease: 'none',
repeat: -1
});
```
### Counter animé (reveal au scroll)
```html
0 ans
```
```js
gsap.utils.toArray('.stat__num').forEach(el => {
ScrollTrigger.create({
trigger: el,
start: 'top 80%',
once: true,
onEnter: () => {
const target = +el.dataset.target;
gsap.to({ v: 0 }, {
v: target,
duration: 2,
ease: 'power2.out',
onUpdate: function() { el.textContent = Math.round(this.targets()[0].v); }
});
}
});
});
```
### Reveal signifiant (below-the-fold uniquement)
```js
gsap.utils.toArray('[data-reveal]').forEach(el => {
gsap.from(el, {
y: 24,
opacity: 0,
duration: 0.5,
ease: 'power2.out',
scrollTrigger: { trigger: el, start: 'top 85%', once: true }
});
});
```
**Interdit sur le hero** — le hero est visible immédiatement.
### Sticker rotatif en boucle (Registre 1, 3, parfois 2)
```html
Depuis 1952 · Depuis 1952 ·
```
```js
gsap.to('.sticker', { rotation: 360, duration: 20, ease: 'none', repeat: -1 });
```
---
## Patterns par registre
### Registre 1 — Éditorial Artisan
**Drop cap qui s'imprime au reveal**
```js
gsap.from('.drop-cap', {
scale: 1.3, opacity: 0, duration: 0.8, ease: 'power3.out',
scrollTrigger: { trigger: '.drop-cap', start: 'top 85%', once: true }
});
```
**Pull quote fond noir qui glisse**
```js
gsap.from('.pullquote', {
clipPath: 'inset(100% 0 0 0)', // sortie de bas → haut
duration: 1, ease: 'power3.inOut',
scrollTrigger: { trigger: '.pullquote', start: 'top 75%', once: true }
});
```
Exception : clip-path autorisé en `scrollTrigger` avec `once: true` sur un élément isolé, pas en reveal générique.
**Numérotation géante qui se révèle mot-par-mot (SplitText)**
```js
const split = new SplitText('.chapter-num', { type: 'chars' });
gsap.from(split.chars, {
yPercent: 100, opacity: 0, stagger: 0.05, duration: 0.6, ease: 'power3.out',
scrollTrigger: { trigger: '.chapter-num', start: 'top 80%', once: true }
});
```
### Registre 2 — Relevé Technique
**Schéma SVG qui se trace au scroll (DrawSVG)**
```html
```
```js
gsap.timeline({ repeat: -1, yoyo: true })
.to('#blob-shape', { morphSVG: '#blob-b', duration: 8, ease: 'sine.inOut' })
.to('#blob-shape', { morphSVG: '#blob-c', duration: 8, ease: 'sine.inOut' });
```
Sans MorphSVG, fallback avec `border-radius` animé (moins riche mais fonctionne) :
```css
.blob-div { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
```
```js
gsap.to('.blob-div', {
borderRadius: '37% 63% 46% 54% / 48% 55% 45% 52%',
duration: 8, yoyo: true, repeat: -1, ease: 'sine.inOut'
});
```
**Gradient qui respire (@property + GSAP)**
```css
@property --g-x { syntax: ''; inherits: false; initial-value: 50%; }
@property --g-y { syntax: ''; inherits: false; initial-value: 50%; }
.breathing-bg {
background: radial-gradient(circle at var(--g-x) var(--g-y), #f5e6d3, #e8c8a0);
}
```
```js
gsap.to('.breathing-bg', {
'--g-x': '60%', '--g-y': '40%',
duration: 10, yoyo: true, repeat: -1, ease: 'sine.inOut'
});
```
**Photos qui flottent en décalage**
```js
gsap.utils.toArray('.float').forEach((el, i) => {
gsap.to(el, {
y: -20,
duration: 6 + i * 0.5, // chaque élément flotte à une vitesse légèrement différente
yoyo: true, repeat: -1, ease: 'sine.inOut',
delay: i * 0.3
});
});
```
### Registre 4 — Service d'Urgence
**Dot vert "disponible" qui pulse**
```css
.pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; }
```
```js
gsap.to('.pulse-dot', {
scale: 1.4,
boxShadow: '0 0 0 10px rgba(34,197,94,0)',
duration: 1.2, yoyo: true, repeat: -1, ease: 'sine.inOut'
});
```
**Ligne ECG qui trace en continu en bas du hero**
```html
04 78 00 00 00
```
```js
// Animation "flip" des chiffres un par un
const tel = document.querySelector('.tel-monumental');
const chars = tel.textContent.split('');
tel.innerHTML = chars.map(c => `${c} `).join('');
gsap.from('.flip', {
rotationX: -90, opacity: 0,
duration: 0.4, stagger: 0.04, ease: 'power2.out',
transformOrigin: '50% 50% -15px'
});
```
**Pin de carte qui bounce**
```js
gsap.to('.map-pin', {
y: -8, duration: 0.8, yoyo: true, repeat: -1, ease: 'sine.inOut'
});
```
### Registre 5 — Institutionnel
**Signature manuscrite qui se trace (DrawSVG ou stroke-dashoffset)**
```html