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 true, the transition is disabled for the target element.

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

<h1 use:reveal={{ disable: true }}>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: string | [number, number, number, number]
default: "easeInOutCubic"

The easing function to use. You can either pass one of the built-in named functions listed below, or a custom cubic bezier curve as an array of four numbers [x1, y1, x2, y2]. Use cubic-bezier.com to preview timing functions visually.

Named easing functions:

Family	Variants
Linear	linear
Sine	easeInSine, easeOutSine, easeInOutSine
Quad	easeInQuad, easeOutQuad, easeInOutQuad
Cubic	easeInCubic, easeOutCubic, easeInOutCubic
Quart	easeInQuart, easeOutQuart, easeInOutQuart
Quint	easeInQuint, easeOutQuint, easeInOutQuint
Expo	easeInExpo, easeOutExpo, easeInOutExpo
Circ	easeInCirc, easeOutCirc, easeInOutCirc
Back	easeInBack, easeOutBack, easeInOutBack

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

<!-- named function -->
<h1 use:reveal={{ easing: 'easeInOutCubic' }}>Hello world</h1>

<!-- custom cubic bezier -->
<h1 use:reveal={{ easing: [0.65, 0, 0.35, 1] }}>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>

wrapperClass

type: string
default: ""

A CSS class (or space-separated list of classes) to add to the wrapper element Svelte Reveal creates around the target node. Use it to size or position the wrapper so it does not interfere with the parent’s layout (e.g. flex, grid, masonry).

Note

Svelte Reveal wraps the target element in a <div> so it can apply transforms without polluting the target’s own styles. That wrapper is a block-level element by default, which can break layouts that expect the target to participate directly in a flex or grid container. wrapperClass is the escape hatch for those cases — common values are display: contents to make the wrapper layout-transparent, or height: 100% to let it stretch with its parent.

Caution

display: contents removes the wrapper from the box tree, which historically caused some browsers (notably older Safari) to also drop it from the accessibility tree. Modern browsers handle this correctly for most elements, but if the wrapper sits around landmarks or interactive content, verify with a screen reader before shipping.

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

<div class="flex">
  <h1 use:reveal={{ wrapperClass: 'reveal-wrapper' }}>Hello world</h1>
</div>

<style>
  :global(.reveal-wrapper) {
    display: contents;
  }
</style>

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(-10deg);

End

opacity: 1;
transform: rotate(0deg);