Clip animation

Overview

The clip-* aliases transition an element from invisible to fully visible by clipping it. They create a rectangular clipping area that hides everything outside the visible region.

Since the clip-* alias hides the entire element, triggers like hover or click won’t work directly on it. To enable interactions, apply the hover or click triggers to the target parameter instead.

Syntax

Examples

These examples show the clip alias in action using the hover trigger, but you can use any of the supported triggers.

clip-up

The clip-up alias reveals the element upward, starting from the bottom.

clip-down

The clip-down alias reveals the element downward, starting from the top.

clip-left

The clip-left alias reveals the element leftward, starting from the right.

clip-right

The clip-right alias reveals the element rightward, starting from the left.

Custom values

This effect does not support any custom values.

Options

All property options passed in the <> are supported.