API

Svelte Reveal also exposes several functions you can call to change the default options and global configuration of this library. Since these functions operate on a global level across all components using Svelte Reveal, you are supposed to only call them from a single file, otherwise you’ll keep overriding the default options and global config from multiple points.

`setOnce`

signature: (once: boolean) => RevealConfig

Sets the reveal animations activation status on page reload.

<script lang="ts">
  import { reveal, setOnce } from 'svelte-reveal';
  setOnce(true);
</script>

<h1 use:reveal>Hello world</h1>

`setDeviceStatus`

signature: (device: Device, status: boolean) => RevealConfig

Sets the status of a device.

<script lang="ts">
  import { reveal, setDeviceStatus } from 'svelte-reveal';
  setDeviceStatus('mobile', false);
</script>

<h1 use:reveal>Hello world</h1>

`setDevicesStatus`

signature: (devices: Device[], status: boolean) => RevealConfig

Sets the status of multiple devices.

<script lang="ts">
  import { reveal, setDevicesStatus } from 'svelte-reveal';
  setDevicesStatus(['mobile', 'tablet'], false);
</script>

<h1 use:reveal>Hello world</h1>

`setDeviceBreakpoint`

signature: (device: Device, breakpoint: number) => RevealConfig

Sets the breakpoint of a device.

<script lang="ts">
  import { reveal, setDeviceBreakpoint } from 'svelte-reveal';
  setDeviceBreakpoint('mobile', 500);
</script>

<h1 use:reveal>Hello world</h1>

`setDevice`

signature: (device: Device, settings: DeviceConfig) => RevealConfig

Sets the settings of a device.

<script lang="ts">
  import { reveal, setDevice } from 'svelte-reveal';
  setDevice('mobile', {
    enabled: true,
    breakpoint: 500
  });
</script>

<h1 use:reveal>Hello world</h1>

`setResponsive`

signature: (responsive: Responsive) => RevealConfig

Updates how responsiveness is handled by the library.

<script lang="ts">
  import { reveal, setResponsive } from 'svelte-reveal';
  setResponsive({
    mobile: {
      enabled: true,
      breakpoint: 425
    },
    tablet: {
      enabled: true,
      breakpoint: 768
    },
    laptop: {
      enabled: true,
      breakpoint: 1440
    },
    desktop: {
      enabled: true,
      breakpoint: 2560
    }
  });
</script>

<h1 use:reveal>Hello world</h1>

`setObserverRoot`

signature: (root: Element | Document | null) => IntersectionObserverConfig

Sets the Intersection Observer root element.

<script lang="ts">
  import { reveal, setObserverRoot } from 'svelte-reveal';
  setObserverRoot(null);
</script>

<h1 use:reveal>Hello world</h1>

`setObserverRootMargin`

signature: (rootMargin: string) => IntersectionObserverConfig

Sets the Intersection Observer rootMargin property.

<script lang="ts">
  import { reveal, setObserverRootMargin } from 'svelte-reveal';
  setObserverRootMargin('0px 0px 0px 0px');
</script>

<h1 use:reveal>Hello world</h1>

`setObserverThreshold`

signature: (threshold: number) => IntersectionObserverConfig

Sets the Intersection Observer threshold property.

<script lang="ts">
  import { reveal, setObserverThreshold } from 'svelte-reveal';
  setObserverThreshold(0.6);
</script>

<h1 use:reveal>Hello world</h1>

`setObserverConfig`

signature: (observerConfig: Partial<IntersectionObserverConfig>) => IntersectionObserverConfig

Sets the Intersection Observer configuration.

<script lang="ts">
  import { reveal, setObserverConfig } from 'svelte-reveal';
  setObserverConfig({
    root: null,
    rootMargin: '0px 0px 0px 0px',
    threshold: 0.6
  });
</script>

<h1 use:reveal>Hello world</h1>

`setConfig`

signature: (userConfig: RevealConfig) => RevealConfig

Updates the library global configuration.

<script lang="ts">
  import { reveal, setConfig } from 'svelte-reveal';
  setConfig({
    once: false,
    responsive: {
      mobile: {
        enabled: true,
        breakpoint: 425
      },
      tablet: {
        enabled: true,
        breakpoint: 768
      },
      laptop: {
        enabled: true,
        breakpoint: 1440
      },
      desktop: {
        enabled: true,
        breakpoint: 2560
      }
    }
  });
</script>

<h1 use:reveal>Hello world</h1>

`setDefaultOptions`

signature: (options: RevealOptions) => RevealOptions

Updates the default options to be used for the reveal effect.

<script lang="ts">
  import { reveal, setDefaultOptions } from 'svelte-reveal';
  setDefaultOptions({
    preset: 'fly',
    duration: 1200,
    delay: 100,
    easing: 'easeOutExpo',
    // Applied to every reveal wrapper created across the app.
    wrapperClass: 'reveal-wrapper'
  });
</script>

<h1 use:reveal>Hello world</h1>