ScrollReveal JSv0.0.0
The ScrollReveal
component should be used when you want to apply classes to an element when it enters the viewport.
Table of content
Usage
Using this component is quite straightforward as it can directly be used in an application. It is based on the Transition
primitive to manage its transition states under the hood.
js
import { Base, createApp } from '@studiometa/js-toolkit';
import { ScrollReveal } from '@studiometa/ui';
class App extends Base {
static config = {
name: 'App',
components: {
ScrollReveal,
},
};
}
export default createApp(App);
html
<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
twig
<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
js
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' }),
},
},
};
}