Skip to main content

Animation

Animation in Liqvid works much the same way as in normal web applications, just synced up to a player. Classically, this means adjusting attributes or CSS properties inside an animation loop. We also support the newer Web Animations API.

Web Animations API​

The easiest and most performant way to do animations on the web is with the Web Animations API. You can use this in Liqvid using the playback.newAnimation() method. The syntax is the same as Element.animate(), but it returns a calllback. You attach the animation to an element by passing this callback as a ref. You can combine multiple animations using the combineRefs() utility. Here is an example:

  • Refresh

Animating with useTime()​

To synchronize with playback, we use the useTime() hook with a callback. Every time the video advances in time, or is seeked, our callback is called with the current time (in milliseconds).

Example: SVG path animation​

Here we show how to animate a car driving along a hand-drawn path. The road shape was created in Inkscape, and the car was taken from https://publicdomainvectors.org/en/free-clipart/Red-racing-car-top-view-vector/2008.html.

  • Refresh
danger

To simplify the animation, the car is driving between both lanes. Do not drive this way.