Reveal

Simple Svelte (<3) component for reveal on scroll

Usage

<script>
    import Reveal from "svelte-c-reveal";
</script>

<Reveal> Content to be revealed </Reveal>

<Reveal trigger="0.1" reveal="fadeInUp">
    Trigger when 10% is in viewport
</Reveal>

<Reveal trigger="0.5" reveal="fadeInUp">
    Trigger in center of viweport (50%)
</Reveal>

Reveal and Hide

<script>
    import Reveal from "svelte-c-reveal";
</script>

<Reveal trigger="0.5" reveal="fadeInUp" hide="fadeOutDown">
    <h1>My revealed content</h1>
    <p>Hello I'm here!</p>
</Reveal>

Props

| Name | Value | Desc | | ---------- | --------- | ------------------------------------------------------------------------- | | reveal | String | Reveal effect | | hide | String | Reveal out (hide) effect | | trigger | Float | (0.0 to 1.0) When the reveal will trigger -> (viewport height * trigger) | | duration | Css value | (number) Duration of the transition in seconds without "s" | | delay | Css value | (number) Time delayed in seconds without "s" |

Effects availables

| Name | | -------------------- | | fadeIn | | fadeOut | | fadeInUp [default] | | fadeOutUp | | fadeInDown | | fadeOutDown | | fadeInRotateX | | fadeOutRotateX | | fadeInRotateY | | fadeOutRotateY | | fadeInLeft | | fadeOutLeft | | fadeInRight | | fadeOutRight |

Custom effects

<script>
    import Reveal from "svelte-c-reveal";
</script>
<style>
    .myfx {
        animation-name: myanimation;
    }
    @keyframes myanimation {
        0% {
            opacity: 0;
            transform: rotate(90deg) scale(0);
        }
        100% {
            opacity: 1;
            transform: rotate(0deg) scale(1);
        }
    }
</style>

<Reveal trigger="0.5" reveal="myfx"> The center of viweport </Reveal>