Reveal

Reveal is a Stimulus controller that reveals elements when they enter the viewport.

Newlogic UI registers the Reveal controller from stimulus-components. It watches all elements marked as item targets and adds the data-in attribute once they become visible.

The component is usually paired with the reveal utility. The controller handles the state change, and the utility class handles the visual transition.

How It Works

1. Add data-controller="x-reveal" to the wrapper element.
2. Mark each element to reveal with data-x-reveal-target="item".
3. When the element becomes visible in the viewport, the controller adds data-in.
4. If data-lazy-controller is present, that controller is registered only after reveal.

Notes

• The component does not animate elements by itself.
• The visual effect is typically defined by the reveal utility.
• data-lazy-controller is useful when another controller should start only after the element is visible.

Source

• components/Reveal.js

Example

<section class="grid grid-cols-container" data-controller="x-reveal">
    <form data-lazy-controller="x-recaptcha">
    </form>
</section>