scrollReveal not working with content loaded via ajax

[cmaaga]

Hi,
I try to use scrollReveal in my wordpress website. You can see it here www.wytworniaprojektu.eu (this is develop version). As you cas see I use Advanced Ajax Page Loader plugin. And this is my problem. Scroll Reveal work only once. I reload code of scrollReveal.js (see inside console log) but nothing happen.

Any idea?

Sorry for my english.

[mikerockett]

Have you tried scrollReveal.init();?

[cmaaga]

Yes, but maybe I can't understand it, because I always have an error "scrollReveal is not defined". You can see on in my website now.
I've tried put it inside my template page and inside plugin settings (this setting reload code for ajax content). Nothing change.

[cmaaga]

Ok, i use proper way to initialize scrollReveal function and now I don't have any error in console log, but still can't call function for ajax content.

[mikerockett]

First of all, you are not loading the plugin - I don't see it anywhere in your code. Also, you are using data-scrollreveal instead of data-scroll-reveal - notice the missing dash?

Once you have got that right, then you can load other content with AJAX, and then use scrollReveal.init().

[cmaaga]

Got it!!!!
I mixed two different libraries. Stupid mistake.

I've tried use this one http://codingdroid.com/wp-content/uploads/Tutorial/Scroll%20Reveal/

BIG HUG!

[mikerockett]

Indeed - that was the old one. You're welcome. 👍

[jlmakes]

👍

[rmuyinda]

Guys pardon me, is it possible to use scrollReveal with AJAX on independent scrolls? If so, could anyone put together a simple example using JSON?

[jlmakes]

@rmuyinda

If you instantiate scrollReveal like this:

window.sr = new scrollReveal();

You will have access to the sr object, so you can call sr.init() anytime afterwards to re-scan for new elements. So in other words, if you’re adding new elements to the page with AJAX, all you need to do is trigger sr.init() in your AJAX success callback.

For example with jQuery:

$.ajax({
  type: "POST",
  url: "api.domain.com/resource",
  data: { name: "John", location: "USA" }
})
  .done( function () {
    // changes to your DOM and then…
    sr.init();
  });

[gian-reto]

Hello guys. First, thanks for this issue, it really helped me getting things to work with dynamic loading of content after searching for the problem somewhere else for hours! 👍
I still have a problem though – correct me if I'm wrong, but it appears that custom effects defined with the data-sr attribute don't work for loaded content (although the elements I try to add later have exactly the same markup as the initial ones which work perfectly)... So I tried setting custom values in the options when creating the ScrollReveal instance: window.sr = new scrollReveal({ options }); but still didn't work. My last attempt was adding the options in the init(); call so it looked like this:

sr.init({
    enter: 'bottom',
    easing: 'ease-out',
    move: '60px',
    scale: {
      direction: 'up',
      power: '0%' },
    over: '0.5s',
    reset: false
  });

But this didn't work either. I'm not sure if it's even possible but I would be glad if you can help!