options.distance controls how far elements move when revealed.

CSS Transforms are preserved. For example, if your element already has 50px of X‑translation and you specify options.distance '50px' and options.origin 'right', your element will initialize with 100px of X‑translation and animate to the computed value of 50px when revealed.

Default Value

{ distance: '0px' }

Accepted Values

The string passed to options.distance should end in one of these units:

'em'Relative to the element’s font size.
'%'Relative to the element’s dimensions.


ScrollReveal.reveal('.items', { distance: '50px' });