Reset only when element is completely outside viewport

[tofuness]

Running ScrollRreveal 3.2.0 on Chrome 51 (Windows 10)

I would love some guidance on how I can have viewFactor at 0.7 but only trigger reset after the element is completely outside the viewport.

Thanks!

[jlmakes]

I put together a demo for you

• View ES6 Example on JSBin
• View ES5 Example on JSBin

Note: If you scroll up immediately after a reset triggers, there can be a bit of delay before the reveal triggers again, depending on your settings. When #273 is implemented, this delay could be removed by using the proposed beforeReset callback instead of afterReset.

ES6 Example (Terse):

window.sr = ScrollReveal()

const minVFactor = 0.0
const maxVFactor = 0.3

sr.reveal('.foo', {
  reset: true,
  viewFactor: maxVFactor,
  afterReveal: (el) => sr.reveal(el, { viewFactor: minVFactor }),
  afterReset: (el) => sr.reveal(el, { viewFactor: maxVFactor })
})

ES5 Example (Explicit):

window.sr = ScrollReveal();

var minVFactor = 0.0;
var maxVFactor = 0.3;

sr.reveal('.foo', {
  reset: true,
  viewFactor: maxVFactor,
  afterReveal: setMinVFactor,
  afterReset: setMaxVFactor
});

console.log("vFactor initialized as: " + maxVFactor);

// ScrollReveal callbacks are passed
// the dom element, so it’s easy to
// pass this to our setVFactor() method
// which re-reveals that element with
// the new configuration.

function setVFactor (el, vf) {
  sr.reveal(el, { viewFactor: vf });
}

// And the callbacks themselves...

function setMinVFactor (el) {
  setVFactor(el, minVFactor);
  console.log("vFactor set to: " + minVFactor);
}

function setMaxVFactor (el) {
  setVFactor(el, maxVFactor);
  console.log("vFactor set to: " + maxVFactor);
}

[tofuness]

Thank you so much @jlmakes ! Closing this issue.