Reveal animation

Overview

The reveal-* alias is similar to Clip alias in the way that it creates a clipping region, but it also add a movement to clipped element. When triggered, the element moves from its initial position—outside the clipping region—into the visible area, creating a revealing effect.

 Since the reveal-* 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 reveal alias in action using the hover trigger, but you can use any of the supported triggers.

reveal-up

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

reveal-down

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

reveal-left

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

reveal-right

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

Custom values

This effect does not support any custom values.

Triggers

Since you can use any of the supported triggers, here are a couple of usage examples:

Active

The active trigger is executed when the user clicks and holds (or taps) the element, then reverts upon release.

Scroll

You can even control the progression of the reveal effect based on the scroll position.

Mouse

Similar to above, you can use a mouse or pointer trigger to control the progression of an effect.

Options

All property options passed in the <> are supported.