Options

Depending on the use case, you can either use this library as-is (which applies some default options), or customize it to your liking. If you choose to do so, you can pass an object to this action containing your own options to be applied.

Keep in mind that these options are applied to the single DOM element you add Svelte Reveal to. For global and more in-depth settings, refer to the API section.

Fields

Fields are simple flags and values you can set on a specific element to change its Svelte Reveal behavior. Here you can find the list of all available fields.

disable

type: boolean
default: false

When set to false, the transition is disabled for the target element.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ disable: false }}>Hello world</h1>

root

type: Element | Document | null
default: null

The root element used by the Intersection Observer.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ root: null }}>Hello world</h1>

rootMargin

type: string
default: "0px 0px 0px 0px"

The root margin property of the Intersection Observer.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ rootMargin: '0px 0px 0px 0px' }}>Hello world</h1>

threshold

type: number
default: 0.6

The threshold (in percentage from 0.0 to 1.0) property used by the Intersection Observer to know when its target element is considered visible.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ threshold: 0.6 }}>Hello world</h1>

preset

type: “fade” | “slide” | “fly” | “spin” | “blur” | “scale”
default: "fade"

The transition preset that should be applied. Check out presets for more info.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ preset: 'fade' }}>Hello world</h1>

reset

type: boolean
default: false

Be careful

Overusing this option prevents the Intersection Observer to stop observing the target node. Performance is therefore not guaranteed when many elements have reset set to true.

When set to true, the node transitions out when out of view, and is revealed again when back in view.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ reset: false }}>Hello world</h1>

duration

type: number
default: 800

How long the transition lasts (in ms).

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ duration: 800 }}>Hello world</h1>

delay

type: number
default: 0

How long the transition is delayed (in ms) before being triggered.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ delay: 0 }}>Hello world</h1>

easing

type: Easing
default: "easeInOutCubic"

The easing function to use. Check out the full list of available easing functions and this other website to preview timing functions.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ easing: 'easeInOutCubic' }}>Hello world</h1>

x

type: number
default: 0

The starting offset position in pixels on the x-axis.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ x: 0 }}>Hello world</h1>

y

type: number
default: 0

The starting offset position in pixels on the y-axis.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ y: 0 }}>Hello world</h1>

rotate

type: number
default: 0

The starting rotation offset in degrees.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ rotate: 0 }}>Hello world</h1>

opacity

type: number
default: 0

The starting opacity value.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ opacity: 0 }}>Hello world</h1>

blur

type: number
default: 0

The starting blur value in pixels.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ blur: 0 }}>Hello world</h1>

scale

type: number
default: 1

The starting scale value in percentage. 1 corresponds to 100%.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ scale: 1 }}>Hello world</h1>

Callbacks

Here is a list of all the event callbacks we expose that you can hook into.

onRevealStart

signature: (node: HTMLElement) => void

Function that gets fired when the node starts being revealed.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ onRevealStart: () => alert('Reveal: start') }}>Hello world</h1>

onRevealEnd

signature: (node: HTMLElement) => void

Function that gets fired when the node is fully revealed.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ onRevealEnd: () => alert('Reveal: end') }}>Hello world</h1>

onResetStart

signature: (node: HTMLElement) => void

Function that gets fired when the reset option is set to true and the node starts transitioning out.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ onResetStart: () => alert('Reset: start') }}>Hello world</h1>

onResetEnd

signature: (node: HTMLElement) => void

Function that gets fired when the reset option is set to true and the node has fully transitioned out.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ onResetEnd: () => alert('Reset: end') }}>Hello world</h1>

onMount

signature: (node: HTMLElement) => void

Function that gets fired when the node is mounted on the DOM.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ onMount: () => alert('Mounting') }}>Hello world</h1>

onUpdate

signature: (node: HTMLElement) => void

Function that gets fired when the action options are updated.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ onUpdate: () => alert('Updating') }}>Hello world</h1>

onDestroy

signature: (node: HTMLElement) => void

Function that gets fired when the node is unmounted from the DOM.

<script lang="ts">
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ onDestroy: () => alert('Destroying') }}>Hello world</h1>

Presets

Caution

All presets have the "fade" preset backed in

Presets are sets of options with predefined values, packaged under a name to achieve a certain transition effect. The following table shows the presets that come bundled with Svelte Reveal and which options they map to.

fade

The element fades in gracefully.

Mapped options

{
  opacity: 0;
}

Resulting CSS

Start

opacity: 0;

End

opacity: 1;

fly

The element fades in and moves along a translation on the y-axis.

Mapped options

{
  opacity: 0;
  y: -20;
}

Resulting CSS

Start

opacity: 0;
transform: translateY(-20px);

End

opacity: 1;
transform: translateY(0px)

slide

The element fades in and performs a translation on the x-axis.

Mapped options

{
  opacity: 0;
  x: -20;
}

Resulting CSS

Start

opacity: 0;
transform: translateX(-20px);

End

opacity: 1;
transform: translateX(0px)

blur

The element fades in and becomes unblurred.

Mapped options

{
  opacity: 0;
  blur: 2;
}

Resulting CSS

Start

opacity: 0;
filter: blur(2px);

End

opacity: 1;
filter: blur(0px)

scale

The element fades in and gets to the original size.

Mapped options

{
  opacity: 0;
  scale: 0.8;
}

Resulting CSS

Start

opacity: 0;
transform: scale(0.8);

End

opacity: 1;
transform: scale(1);

spin

Be careful

In order to use this transition it is required to use the width CSS property on the element to reveal. If you are not already using this property for other things, you can use set it to width: fit-content.

The element fades in and gets to the original rotation degree.

Mapped options

{
  opacity: 0;
  rotate: -10;
}

Resulting CSS

Start

opacity: 0;
transform: rotate(-10);

End

opacity: 1;
transform: rotate(0);