EFFECTS

Clip Up

Wipes into view from the bottom edge, like a panel sliding up over the element, using a CSS clip-path.

Classes

ClassPlays
fx-clip-up-plOn page load
fx-clip-up-stWhen the element scrolls into view
fx-clip-upAutomatically, when its section scrolls into view

Options that matter

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

Example

<div class="fx-clip-up-st">Wipes in from the bottom</div>

See also Clip Down for the same wipe from the top edge.