[css-animationworklet] Scrollspy use case

[majido]

From @Malvoz on February 23, 2018 1:16

Could the "scrollspy"-pattern be included as a motivating use case?

Demos:
https://getbootstrap.com/docs/4.0/components/scrollspy/
https://scotch.io/tutorials/build-a-custom-javascript-scrollspy-navigation

Copied from original issue: WICG/animation-worklet#92

[majido]

This is interesting. So if I understand this correctly, basically the navigation element becomes highlighted when their respective page is scrolled into view.

This is definitely something we like to ensure it is possible to build with AnimationWorklet + ScrollTimeline. In fact it is a key usecase mentioned for ScrcollTimeline but based on the information in that specification they have punted on addressing it for now.

I suspect we need the following things in place:

1. Ability to read scroll offset, already possible with ScrollTimeline
2. A way to express "trigger" offsets for each target. Our solution for this is to allow additional options to be passed to a WorkletAnimation which become available in worklet scope. Then you can drive the effect when current time is in the relevant range defined by trigger points.
3. A way to translate the "highlight" effect into a keyframe effect. The current scrollspy impl you linked is adding a .active class and that way you can specify any transition. A straightforward way to do this is to just have a keyframe effect that models the transition for specific style properties. This is not as flexible as adding a class but practical.
4. A way to drive these highlight effect based on time one scroll is triggered. Already possible by allowing Timelines to be sent to worklet via additional options for the animation. We are working to figure out how to do this efficiently though i.e., only be time-driven until animation is complete and then go back to be scroll-driven.

So I feel all the right ingredients to make something like this are already present in current AnimationWorklet proposal 👍.

In such an implementation, the worklet animation is only used for providing "trigger" behavior. There has been some consideration to add such a feature to ScrollTimeline itself as well to make such a thing even easier.

@flackr FYI.

[majido]

I suggest adding this type of scroll-triggered navigation under "Scroll-linked effects". I don't particularly think it needs to require a "css transition".