View Factor

number

options.viewFactor specifies what portion of an element must be within the viewport for it to be considered visible.

Default Value

{ viewFactor: 0 }

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

Be careful using this option with really tall elements! Instead, see if you can achieve your desired effect using options.viewOffset

Usage

/**
 * These elements will reveal the moment
 * the first pixel is within the viewport.
 */
ScrollReveal().reveal('.any', { viewFactor: 0 });

/**
 * These elements only reveals once 50%
 * of them are within the viewport.
 */
ScrollReveal().reveal('.some', { viewFactor: 0.5 });

/**
 * These elements reveals after they
 * are completely within the viewport.
 */
ScrollReveal().reveal('.all', { viewFactor: 1.0 });