Advanced · easeReverse

Radial menu

A floating action button whose items spring out along an arc with elastic.out(1, 0.5). Closing uses easeReverse, added in GSAP 3.15, so the reverse animation can have its own ease instead of playing the elastic wobble backwards. The controls are signals, and the timeline rebuilds itself when they change.

injectGsapeaseReversecontextSafe

easeReverse speed 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)" />

How this works

Each item tweens to a point on an arc: cosine and sine of its angle times the radius, staggered 0.05s apart. The plus icon rotates 135 degrees into a close icon on the same timeline, so open and close always stay in sync.
easeReverse: true mirrors the entrance ease when the timeline reverses; a string like power3.in gives the close its own ease. Without it, reversing an elastic entrance replays the wobble backwards, which reads as broken.
The toggle and the dropdown are signals read inside the injectGsap callback. Change one and the callback runs again: the context reverts, the old timeline dies, and a new one is built with the new value. That is the whole rebuild logic.
Speed is a signal too, but it is only read inside the click handler, never in the callback. Dragging the slider rebuilds nothing; it just sets timeScale on the next close.