You may notice a little indicator near the bottom of the element has been added in this step. It shows which item is selected in the carousel. You can inspect the code in the render method to see how this was done. It follows a similar pattern to position left and width based on the selected item.
Now import the animate directive from the @lit-labs/motion package.
Packages released under @lit-labs aren't quite ready for production.
These projects may be experimental or incomplete, and they're
subject to breaking changes. See the Lit documentation
for more info.
Add the import after the other import statements at the top of the module.
import {animate} from'@lit-labs/motion';
Normally, you'd also need to add @lit-labs/motion to your
package.json but to speed things up, that's already been done.
The animate directive will take care of animating the position. It's great for "tweening" between different rendered layouts.
Add the animate directive to the "container" surrounding the slots in the return statement of the render method:
returnhtml`
<divclass="fit"
${animate()}
Now add the animate directive to the indicator element at the bottom of the render method:
<divclass="indicator"
${animate()}
Note that even though you're setting the left property, the animate directive is actually animating the css transform property. This is much more efficient since it does not require the browser to perform layout or style recalculation.
The animate directive is intended to be very simple to use, but it has a lot of configuration options. Check out the @lit-labs/motion readme for more information.
Check out this article on FLIP
to learn more about the technique used by the animate directive.