Scroll Reveal working with Lozad lazy loading

[ZCweb]

Scroll Reveal is great and I can get that working. I am doing some fade in things and elements that come in from the sides. I also have lazy loading working via the popular lozad plugin. My issue is that lozad doesn't work if scrollreveal is activated. Is this because how can something lazyload in if it is going to be animated in. It would be great if the 2 could work together and lozad is very popular so I have high hopes this could work.

A typical scroll reveal:

oneAfterCol = jQuery(this).find(".column");

sr.reveal(
  oneAfterCol,
  {
    duration: 1200,
    distance: "250px",
    delay: 200,
    origin: "bottom",
    scale: 0.9,
    viewFactor: 0.3
  },
  100
);

A typical lozad function ( https://github.com/ApoorvSaxena/lozad.js?files=1 )

const observer = lozad(".lozad", {
  rootMargin: "300px 0px",
  loaded: function(el) {
    el.classList.add("is-loaded");
  }
});
observer.observe();

Environment

• Operating System: OSX
• Browser Version: Chrome 68.0.3 and Firefox 61.0.2
• ScrollReveal Version: 3.3.4

[jlmakes]

It looks like Lozad uses a data-src attribute to create the src attribute as the element is scrolled to. Nothing comes to mind why this can't work with ScrollReveal.

Have you tried something like this?

const options = { scale: 0.9, duration: 1200 };

const observer = lozad(".lozad", {
  rootMargin: "300px 0px",
  loaded: function(el) {
    sr.reveal(el, options);
  }
});
observer.observe();