Different offsets for enter/exit

[hirbod]

Hi,

it's already pretty nice to have different offsets per axis, but what I am missing is to have different offsets for enter and exit, because I would like to have some elements appear later on enter but being pushed out earlier on exit.

Currently I have to destroy and register bunch of Observers in order to achieve that.

[hirbod]

An idea would be to check, if, for example, offsetY: is an object { enter: 400, exit: 200 } and to not break current, also check for a Number

[gpoitch]

@hirbod sounds like a useful feature. The object/number fallback sounds like a good api too. I would accept a PR with that.

[hirbod]

I would donate $50 if you could do that. Its not like I am not willing to help, but my deadline is pretty limited and tooling, writing tests etc would take too much time for me right now. And you only ship without sources on npm, so I can't use "patch-package" and have to setup to much right now.

What do you think? :)

[gpoitch]

@hirbod yea I can help you out. I set up GitHub sponsors on my profile.

[hirbod]

Thats fine, you can also send me your PayPal

[hirbod]

Venmo is not available in Germany. GitHub sponsors are subscriptions. Can I sponsor and cancel it instantly afterwards?

[hirbod]

Ok I sponsored 50 bucks

[gpoitch]

@hirbod thank you. Here are the directions to cancel it: https://docs.github.com/en/free-pro-team@latest/github/setting-up-and-managing-billing-and-payments-on-github/downgrading-a-sponsorship#canceling-a-sponsorship

I started working on it here: #28

Got the API working but unfortunately, the actual functionality may not be possible after spending time on it. For example, when the enter/exit offsets are different (enter: 500, exit: 100), the enter/exit callbacks will repeatedly fire back and forth between each other when the element is in that 400px difference zone. When they are the same, there is an exact dividing line.

Open to other ideas how we can solve it, or at least provide appropriate information in the callbacks to let the user handle it.

I should have looked into more before we talked about payments. Hopefully they prorate the cancellation.

[hirbod]

Bummer. I see the issue now, should've think about it too, but you know how it is. A simple idea, a quick code review and you think you got a solution :D

I think, what we need, is also to think about direction. @gpoitch

If we have direction "down", with 400 on enter, and exit: 100, we need to reverse those values when direction changes to "up". You already got this information. Might this be the key?

[hirbod]

Btw, no need to cancel anything. You can take that 50 anyway

[gpoitch]

Yea you're right, I think using the direction information would help. But it would also make the bounds checking code a lot more complex and slower with checking each edge, direction and enter/exit offsets that I wouldn't want the basic majority use-cases to incur. And would probably take me days to get it right.

I'll keep thinking on it.
Maybe using Intersection Observer instead of viewprt could give you the options you need. This library pre-dates that and almost makes it obsolete anyway.

[hirbod]

Tbh, I always thought that this library makes use of the Intersection Observer, but I was already using it for a month after I realized its not :)

Speaking for myself, I only need top and bottom, but I might consider refactoring using Intersection Observer.
Thanks

[hirbod]

Hey, thanks for your effort. I just totally uninstalled viewprt and refactored using Intersection API. Still not giving me the results I wanted but they are much closer and I feel like everything is a bit more fluid and less janky.

Thanks anyway!

[gpoitch]

@hirbod glad you got it somewhat sorted and sorry we couldn't get you a fast solution here.

I would definitely recommend Intersection Observer for any new projects going forward. I was planning on integrating it under the hood here but I'm not sure it's worth the effort. The advantage of viewprt at this point is wider browser support and an alternative api that some may find more intuitive. Thanks.

[hirbod]

Yeah, I already used it before but for this specific project, I was trying to find something more generic.
I think there are already plenty libs outside like https://github.com/zeusdeux/observe-element-in-viewport#readme which provide a wrapper around the API.

Save your time :)