Custom event on viewport visible?

[IndexOverflow]

A great addition to scrollReveal would be the ability to trigger your own JS events on viewport visibility.

[jlmakes]

I like it.

Any ideas on how you see this working? Perhaps something like:

<div data-scroll-reveal="enter left and emit evt-name"> foo </div>

I think there should be an event fired when an element enters the viewport, and when it leaves — meaning the above would trigger the events evt-name--enter and evt-name--exit respectively.

Thoughts?

[IndexOverflow]

Cool. Your suggestion sounds good too: I've only used scrollReveal for a short while, so I'm not familiar with the underlying code, but from a users standpoint keeping the current sugar syntax makes sense.

Is it likely that you will implement this yourself anytime soon or should I give it a go and make a pull request?

[jlmakes]

Duplicate #19 #44

I’ll likely start on integrating #30 and #32 next, so if you want to take a stab at adding custom event emitters — please do.

[IndexOverflow]

I've made a working prototype. Working on this I've discovered several possible approaches. Problem is that I sort of like all of them. Hoping to get some feedback.

1. Pass in function names and call them on enter and exit respectivily.
   For example,

<div data-scroll-reveal="enter left and notify someFunction, exit otherFunction"> foo </div>

window.someFunction = function(el) {// Function body};

This would deviate a bit from my original post, but does allow a lot of flexibility.

2. Create a scrollReveal global event on enter / exit.

<div id="somediv" data-scroll-reveal="enter left"> bar </div>

$('#somediv').on('scrollReveal', function(e) {
  var el = e.target;
});

3. The original, suggested approach. Emitting event with postfixed --enter or --exit.

[jlmakes]

Nice work Knut, I’ll review and get back to you over the weekend. (It’d be nice if we had some more input from others on this too!)

[jlmakes]

Thanks for the ideas @IndexOverflow !

Callbacks are now supported in v2.x.x — See the Wiki

[Alaamasoud]

Hi,
can you please explain how it's possible to trigger the animation when element exit the viewport?

thanks in advance

[jlmakes]

@Alaamasoud you would have to use options.afterReset