ScrollReveal JS

The ScrollReveal component should be used when you want to apply classes to an element when it enters the viewport.

Usage

This component can directly be used in an application. It is based on the Transition primitive to manage its transition states under the hood.

import { registerComponent } from '@studiometa/js-toolkit';
import { ScrollReveal } from '@studiometa/ui';

registerComponent(ScrollReveal);

<div
  data-component="ScrollReveal"
  data-option-enter-from="opacity-0"
  data-option-enter-active="transition">
  <div data-ref="target" class="opacity-0">...</div>
</div>

Configuring an offset for the reveal

The ScrollReveal component uses the [withMountWhenInView decorator] to detect when the root element is entering the viewport. You can configure an offset by using the data-option-intersection-observer option from the decorator to adjust the rootMargin property.

Via the data-option attribute in HTML

<div data-component="ScrollReveal"
  data-option-enter-from="opacity-0"
  data-option-enter-active="transition"
  data-option-intersection-observer="{{ { rootMargin: '100px' }|json_encode }}">
  <div data-ref="target" class="opacity-0">
    ...
  </div>
</div>

By overring the default value of the intersectionObserver option in JavaScript

import { ScrollReveal as ScrollRevealCore } from '@studiometa/ui';

export default class ScrollReveal extends ScrollRevealCore {
  static config = {
    ...ScrollRevealCore.config,
    options: {
      ...ScrollRevealCore.config.options,
      intersectionObserver: {
        type: Object,
        default: () => ({ rootMargin: '100px' }),
      },
    },
  };
}