dkaoster / scrolly-video

Components for scroll-based (or other externally controlled) playback.
https://scrollyvideo.js.org/
MIT License
971 stars 39 forks source link

Improve: programmatic scrolling experience #107

Closed tarsisexistence closed 5 months ago

tarsisexistence commented 5 months ago

This PR can be treated as a breaking change and touches on several things. Let me describe it by points.

First of all, this PR addresses the issue of subsequent setScrollPercent. When we added setScrollPercent, it was naively working just by running a browser scroll, so the rest of the code doesn't need a big refactoring because we relied on the scroll event.

There are a couple of issues with this:

Also, nice to have things are:

Feel free to share your thoughts. And maybe we finally need to build a repro for advanced cases for easier testing and regression. One more thing: I added a few lines of code to support onChange, but we can do it separately, of course. I just showed how easy it is now.

tarsisexistence commented 5 months ago

Implementation breakdown.

Now we have the only way to update the video percentage from outside setVideoPercentage, which is trackScroll agnostic. If it's enabled - it will scroll, and vice versa.

So, at this point, we deprecate setScrollPercent and make the previously exposed setTargetTimePercent as private for internal usage only.

When a user invokes setVideoPercentage:

I also added lockScroll, which prevents users from changing the result scroll position. So in case lockScroll is enabled, user still can scroll during scrollTo phase, but scroll position will come to the desired place magnetically. I added it as API because I feel some users find this undesired for their apps, so I left the possibility to turn it off.

tarsisexistence commented 5 months ago

@dkaoster I appreciate that a lot and happy it would help this project grow and be useful :)

i did a couple of tests in my apps, so it works much better now, so i'm good to go!