@9am/before-after NPM

Demo

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>

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

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.