Avanzado · easeReverse

Menú radial

Un botón de acción flotante cuyos elementos saltan a lo largo de un arco con elastic.out(1, 0.5). El cierre usa easeReverse, añadido en GSAP 3.15, para que la animación inversa tenga su propio ease en lugar de reproducir el rebote elástico al revés. Los controles son signals, y el timeline se reconstruye solo cuando cambian.

injectGsapeaseReversecontextSafe

easeReverse velocidad 1.0x

<button #itemEl class="fab-item" aria-label="Search">…</button>
<!-- three more items -->
<button class="fab" (click)="toggle()"
  [attr.aria-expanded]="open()">
  <svg #plusIcon viewBox="0 0 24 24">…</svg>
</button>

<input type="checkbox" role="switch"
  (change)="easeOn.set($event.target.checked)" />
<select (change)="easeSel.set($event.target.value)">…</select>
<input type="range" min="1" max="3" step="0.1"
  (input)="speed.set(+$event.target.value)" />

Cómo funciona

Cada elemento se anima hacia un punto del arco: coseno y seno de su ángulo por el radio, escalonados 0.05s. El icono de más rota 135 grados hasta convertirse en un icono de cerrar en el mismo timeline, así que abrir y cerrar siempre van sincronizados.
easeReverse: true refleja el ease de entrada cuando el timeline se invierte; un string como power3.in le da al cierre su propio ease. Sin él, invertir una entrada elástica reproduce el rebote al revés, y se ve roto.
El interruptor y el desplegable son signals leídos dentro del callback de injectGsap. Cambia uno y el callback vuelve a ejecutarse: el contexto se revierte, el timeline viejo muere y se construye uno nuevo con el valor nuevo. Esa es toda la lógica de reconstrucción.
La velocidad también es un signal, pero solo se lee dentro del handler de click, nunca en el callback. Mover el slider no reconstruye nada; solo fija el timeScale del próximo cierre.