Opacity

number | null

options.opacity specifies the opacity they have prior to being revealed.

There is no option to control the final opacity. In other words, your reveal animations will transition from your options.opacity to their computed opacity—the value dictated by your CSS (and/or other JavaScript libraries) at the time reveal() was called.

If the value passed to options.opacity happens to be the same as the element’s computed opacity, ScrollReveal does not generate opacity styles (because there would be no visible impact).

Default Value

{ opacity: 0 }

Accepted Values

The number passed to options.opacity is a range between 0.0 and 1.0. Values outside that range, though valid, will be clamped to the nearest limit.

You can force ScrollReveal to skip generationg opacity styles with options.opacity null

Usage

Assuming a computed opacity of 1, we can create a "spotlight" effect where elements don’t move but appears to get brighter as they enter the viewport, e.g:

ScrollReveal().reveal('.spotlight', {
    distance: '0px',
    opacity: 0.8
});