@9am/before-after

<before-after>

A small Web Component shows a before-after comparison. 🌓

Demo

Go to the Home page.

Usage

Include via CDN(e.g. unpkg) or Download a copy

<script src="https://unpkg.com/@9am/before-after/dist/index.min.js"></script>

<before-after>
    <section slot="before">
        <h1>BEFORE</h1>
    </section>
    <section slot="after">
        <h1>AFTER</h1>
    </section>
</before-after>

Or import the ESM version

<script type="module">
    import 'https://unpkg.com/@9am/before-after/dist/index.es.js';
</script>

Or install via npm

npm install @9am/before-after

Documentation

Attributes

Name	Type	Default	Description
varient	linear | radial | conic repeating-linear | repeating-radial | repeating-conic	linear	The varient.
orient	horizontal | vertical	horizontal	The orientation.
value	number	50	The position of the thumb bar. (0-100)

CSS Properties

Name	Type	Default	Description
--position	css gradient params before <color-stop-list>	linear: to left radial: circle at center conic: at center	The control for how the mask behaves.
--repeat	number	6	The repeat times for repeating- varients.
--thumb-size	css size	1px	The thumb size.
--thumb-color	css color	white	The thumb color.

License

MIT