Manual Instantiation

[mstaicu]

After creating and inserting the HTML into the DOM, initialize the script with 'new window.scrollReveal()'

[mstaicu]

My use case consisted in getting some data from a web service, binding it with a templating library and inserting it in the DOM. If I were to just insert the script at the bottom of the page, the initialization that is done at the bottom of the script would ignore all my newly inserted HTML i.e. nothing would happen, because scrollReveal.js expects the HTML to already be there.

[shprink]

Yep that's a shame. We need a "reload" method that would register newly created elements otherwise we cannot dynamically insert DOM...
Good luck

[mstaicu]

The pull request that I did does just that. For example, after I insert a new batch of elements in the DOM, I recall the scrollReveal constructor, recreating a new object for each batch. I don't know if this is efficient but it works.

[jlmakes]

Thanks for this @mstaicu and @shprink

I was reading about DOM Mutation Events, maybe something like this will help scrollReveal adapt to asynchronously HTML insertion; I would love it if, without manual effort or configuration, scrollReveal could handle this.

[mstaicu]

The pull request has not been merged so all I can do is share with you a copy of the library as it stands, modified by me. Use this code in a *.js file: https://gist.github.com/mstaicu/8889208/raw/929d15b0648c55b01b5f927196b50e874056b258/gistfile1.js and then call window.scrollReveal = new scrollReveal(); after you loaded up your HTML. Let me know if it works.

[mstaicu]

Like I mentioned in my previous replay, I am +1 for using mutation events. I propose to not merge my changes yet, and run some tests using these events. I will do some tests of my own, since I already have the envrionment set up for asynchronous insertion and let you know how well do these events scale.

[jlmakes]

It seems DOM Mutation Observers will replace DOM Mutation Events due to performance issues.

I’m sure it’s still worth exploring, but for the time being, I’m thinking manual instantiation and re-initialization is a fairly straight forward and reliable solution. Something like this issue (#14) would also benefit from this change.

What do you think?

[shprink]

+1

[mstaicu]

Sorry for the late replay, I didn't have time these days to focus on this project since I had several exams. I would like to revisit my approach one more time before giving you my go, is that ok?

[jlmakes]

scrollReveal no longers instantiates automatically by including the script, you must now manually instantiate it:

  // window.sr = new scrollReveal()

If you modify the DOM, you can re-initialize like so:

  // sr.init()

This API is no longer supported.