It it possible to control a fluid animation in Lit Virtualizer

Question

I am implementing a Infinte Scroll Carousel with Lit. I want to control the carousel with key events. On long key press (or throttled) I want the animation te be fluid and stop at a specific place.

Is it possible to animate the items in virtalizer with some CSS and avoid using window.scrollTo API?

I tried to use virtualizer.element(n).scrollIntoView but did not get the desired result

Answer 1

I will assume you used scrollIntoView() with the behavior: 'smooth' option from the README:

virtualizer.element(42).scrollIntoView({
  block: 'center',
  behavior: 'smooth',
});

Because Virtualizer works by directly manipulating the absolute positions of its light-DOM child elements aka rendered items, its use of computed styles or observances by the ResizeObserver, which are how it identifies moments to recalibrate due to possible visibility changes, may conflict with some animation approaches if they were applied directly to children in CSS.

However, if you are able to apply your CSS animation/transitions to the containing element, i.e. the <lit-virtualizer> custom element itself or the containing element of the virtualize() directive if that was used, you may be able to create the effect you want.

In this video I am doing a very broad overview of Virtualizer, but at the specific time in the link 5:24 I am trying to show visually that Virtualizer is basically just a big container that pretends to hold all the children and if you can control the position of that container in the viewport then CSS animations transitions for that container element should function as expected.

https://www.youtube.com/watch?v=ay8ImAgO9ik&t=324s

If scroller: true then it is trickier as a separate container element is used inside.

If you have more details you can share about your use case, I'd be interested in reviewing it further as an issue at https://github.com/lit/lit/issues

Answer 2

As Brendan's answer suggests, the basic approach would be to:

• Create an explicitly sized, overflow: hidden container
• Put a virtualizer inside that container
• Use CSS (animations, or transforms + transitions, etc.) to position the entire virtualizer within the container based on user interactions with whatever affordances you provide

I suspect you tried this and found that the virtualizer did not automatically re-render when you tried to navigate past the initially rendered items. That's because virtualizer relies on scroll events to trigger its update cycle, and since you're not using native scrolling you aren't getting those events.

However, it's pretty easy to get the effect you want by firing simulated scroll events while your animation / transition is in progress. You can use requestAnimiationFrame() to do this efficiently.

Here's an example in the Lit playground (the interesting bits are in the transition-scroller.ts file):

https://lit.dev/playground/#gist=26a7de1c61a886625f691cc9484cab7c