EFFECTS

Spin Reveal

Rotates and grows into place while fading in — a playful entrance for badges, icons or callout cards.

Classes

ClassPlays
fx-spin-reveal-plOn page load
fx-spin-reveal-stWhen the element scrolls into view
fx-spin-revealAutomatically, when its section scrolls into view

Options that matter

  • Duration — fx-duration-[n], default 1.4 seconds.
  • Delay — fx-delay-[n], default 0.
  • Ease — fx-ease-[name], default power3.out.
  • Start position — fx-start-[pos], default top 85% (scroll-triggered only).

The rotation angle (-30°) and starting scale (0.9) can only be changed from JavaScript — see JavaScript API.

Example

<span class="badge fx-spin-reveal-pl">New</span>