back

Reveal

Reveals elements when they gets in or out the viewport.

Usage

<div class="my-element" data-lg-reveal></div>
<div class="my-element" data-lg-reveal="fade"></div>
<div class="my-element" data-lg-reveal="my-reveal"></div>

You can use built-in animations or create your own ones.

When multiple elements get in the viewport at the same time, their reveal animations will be staggered with a 0.1 second delay (see attributes).

Built-in animations

  • fade|fade-to-top|fade-to-right|fade-to-bottom|fade-to-left|fade-x|fade-y
  • fade-rotate|fade-rotate-to-top|fade-rotate-to-right|fade-rotate-to-bottom|fade-rotate-to-left|fade-rotate-x|fade-rotate-y
  • fade-scale|fade-scale-to-top|fade-scale-to-right|fade-scale-to-bottom|fade-scale-to-left|fade-scale-x|fade-scale-y
  • scale|scale-to-top|scale-to-right|scale-to-bottom|scale-to-left|scale-x|scale-y
  • slide|slide-to-top|slide-to-right|slide-to-bottom|slide-to-left|slide-x|slide-y

(more coming…)

Custom animations

The revealed element gets a .lg-reveal and a.lg-reveal--[reveal name] CSS classes when initiated. It also gets .is-in, .is-out, .is-out-top, .is-out-bottom CSS classes when it gets in or out the viewport.

You can use these to create the reveal animation in CSS:

.lg-preloader--my-reveal {
  opacity: 0;
  transition: opacity 0.3s linear, transform 0.3s ease-in-out;
  
  &.is-out-bottom {
    transform: translate3d(0, 10px, 0);
  }

  &.is-out-top {
    transform: translate3d(0, -10px, 0);
  }
  &.is-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

Or you can use a third-party JS animation library:

// Add a callback function
luge.reveal.add('in', 'myReveal', (element) => {
  // When the element gets in viewport
  gsap.to(element, ...)
})

luge.reveal.add('out', 'myReveal', (element) => {
  // When the element gets out of viewport
  gsap.to(element, ...)
})

// Or attach the function to the element onrevealin and onrevealout properties
document.querySelector('.my-element').onrevealin = () { gsap.to(this, ...) }
document.querySelector('.my-element').onrevealout = () { gsap.to(this, ...) }

Staggered reveals

You can set up staggered reveal animations on children elements to reveal them with a staggered start time:

<div class="my-parent" data-lg-reveal="fade" data-lg-reveal-stagger="0.1">
  <div class="my-child"></div>
  <div class="my-child"></div>
  <div class="my-child"></div>
</div>

When the parent element gets in the viewport, each child will be revealed with the fadeanimation and a 0.1 second delay.

You can also use different reveal animations for each child:

<div class="my-parent" data-lg-reveal data-lg-reveal-stagger="0.1">
  <div class="my-child" data-lg-reveal="fade"></div>
  <div class="my-child" data-lg-reveal="fade-to-left"></div>
  <div class="my-child" data-lg-reveal="fade-to-right"></div>
</div>

Attributes

Attribute Type Default Description
data-lg-reveal String null The reveal animation name. Set it to one of the built-in animations name or create your own one.
data-lg-reveal-multiple Boolean false Whether the element should be revealed in and out when it gets back in or out of the viewport.
data-lg-reveal-stagger Number 0.1 The delay (in second) between staggered child animations start. You can leave it empty if you want to use the default global value.

The default value can be changed globally in JS luge.settings({reveal: {stagger: 0.1}}).

data-lg-reveal-delay Number 0 The delay (in second) before the reveal animation starts when the element gets in the viewport.