Calling reveal() on the same target does work with config.origin as "top" or "left" [solved v3.2.0]

[jlmakes]

Recreating The Problem

config = {
  duration: 2000,
  distance: '1000px',
  origin: 'top'
}

window.sr = ScrollReveal(config)
sr.reveal('.box')
sr.reveal('.box')

After the first reveal, the distance for the CSS Translate X will be -1000 because of this bit in the _configure() method:

// Let’s make sure our our pixel distances are negative for top and left.
// e.g. origin = 'top' and distance = '25px' starts at `top: -25px` in CSS.
if (elem.config.origin === 'top' || elem.config.origin === 'left') {
  elem.config.distance = '-' + elem.config.distance
}

The problem is that the second time through, this bit of code will result in --1000...

And that’s just nonsense.

[jlmakes]

lol, nice distance bro...

Since the config.distance is a string (in order to support various CSS units), it’s unfortunately not as simple as just using Math.abs(elem.config.distance) * -1.

Instead, that same logic must be expressed using a regex to check if the config.distance starts with -, and remove or add - as necessary.

Also, I’m going to move the offending lines out of the _configure() method and into the _generateTransform() method where the distance value is actually used.

Example:

var config = elem.config
var cssDistance

// Let’s make sure our our pixel distances are negative for top and left.
// e.g. origin = 'top' and distance = '25px' starts at `top: -25px` in CSS.
if (config.origin === 'top' || config.origin === 'left') {
  cssDistance = /^-/.test(config.distance)
    ? config.distance.substr(1)
    : '-' + config.distance
}