Reveal

Reveals elements when they get 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>

Manual reveals

Sometimes it can be useful to trigger reveal animations manually, to group them in a larger animation sequence. You can do so by adding the data-lg-reveal-manual attribute to the element.

Reveal animation can then be triggered manually:

// Reveal in animation
document.querySelector('.my-element').luge.reveal.in()

// Reveal out animation
document.querySelector('.my-element').luge.reveal.out()

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.
data-lg-reveal-manual	Boolean	false	Disable automated reveal on scroll and enable manual triggering.