Reveal

Clip-path reveal — the element is hidden behind a mask that opens in the requested direction when it scrolls into view. Good for images and section reveals.

From left

From bottom

From right

Usage

import { Reveal } from '@bwo-ui/react';

<Reveal direction="bottom" duration={1.0}>
  <img src="..." />
</Reveal>

Props

Prop	Type	Default	Description
`direction`	`'left' \| 'right' \| 'top' \| 'bottom'`	`'bottom'`	Side the content emerges from.
`duration`	`number`	`1.0`	Seconds.
`ease`	`string`	`'expo.out'`	GSAP ease.
`start`	`string`	`'top 85%'`	ScrollTrigger start.
`once`	`boolean`	`true`	Play only once.
`delay`	`number`	`0`	Pre-tween delay.