Intersect Progress & Scroll Direction

[ermincelikovic]

First of all, Alpine is just great and an absolute joy to use!

While Alpine is used a lot in web apps, my team and I use it heavily for building interactions on storytelling and e-commerce websites.

We managed to kick out the majority of the js library bloat we used before. One major library that is left is ScrollTrigger. ScrollTrigger is quite powerful, but the biggest use case is actually scroll progress and scroll direction - most of the times replaceable by snippets similar to this one.

I figured that adding scroll progress and direction would probably be of huge value for folks who are using intersect package.
Combining it with packages like motion would allow for creating Apple-like landing pages.

[SimoTod]

I don't think it's technically possible with the current implementation. x-intersect doesn't detect scrolling, it detects when a dom element enters or leave the viewport. This could be because of scrolling but, also, because a user clicked on an anchor link or because a different event (e.g. Adding removing content before the observed element) causes the element to be pushed in or out of the viewport.

Under the hood, it uses the intersection observer API which doesn't have any concept of scrolling or direction.

Do you have something in mind already?

[ermincelikovic]

Thanks for the quick reply!
Do you think it would make more sense to create a separate package for this use case?

[SimoTod]

I'm not sure, it looks like a specific requirement rather then a generic problem so you can probably use the code you posted above.
You can use @scroll.window.passive="..." if you want to create an alpine component.

[Sulaymon-dev]

@SimoTod The intersection observer API has three options: root, rootMargin and threshold. Can I set 'root' and 'rootMargin' ? (I need both)

[SimoTod]

No, there are no options to set those in the plugin: https://github.com/alpinejs/alpine/blob/main/packages/intersect/src/index.js

Also, threshold only supports 3 possible value at the minute: 0, 50 and 100

If you really need it, you have to find a good syntax and pitch it to Caleb.