Skip to main content

Liqvid 2.1

· 4 min read
Yuri Sulyma

I'm very excited to announce the release of Liqvid 2.1. The major new feature is the ability to use the Web Animations API in videos, making animation in Liqvid dramatically easier. There are also dozens of little changes making Liqvid development smoother and easier overall.

Animation​

The Web Animations API makes animation on the web easier, faster, and declarative. Here's how to use it in Liqvid:

  • Refresh

A big challenge here was mobile support: Liqvid aims to work even on very old browsers, since static videos work everywhere. Old versions of iOS (I personally use iOS 12) don't support the WAAPI; although a polyfill exists, it doesn't completely work, breaks the native Web Animations support in newer browsers, and is no longer maintained. Therefore, we have a script which loads the polyfill selectively and patches some of the issues with it.

useTime()​

The WAAPI covers most, but not all animation needs. For classical prop-updating animation, we have a new useTime() hook. Besides a shorter name, this improves on the existing useTimeUpdate() in two ways:

  • gets called once before video starts playing, so animations will initialize correctly

  • accepts a "selector" function, similar to state libraries, avoiding unnecessary rerenders

See it in action on the React Three Fiber page (oh yeah, we added that too!)

Ease-of-use​

This update also contains lots of little changes making Liqvid easier and less awkward to use:

  • it is no longer necessary to use the Script class, <Player> can be used with just a Playback

  • the start prop on <Audio> and <Video> now defaults to 0, and can be omitted

  • --lv-canvas-height CSS variable can be used instead of calc(100% - var(--lv-height))

  • we now provide the fake fullscreen code as an includable script

  • the thumbs prop takes reasonable defaults, so you only need to specify path and highlights

  • Playback and Script now inherit from EventEmitter, getting rid of the hub property

  • Utils.animation.bezier() and Utils.animation.easings have been added back in

  • there is a new Utils.json for loading recording data, and a new Utils.svg for making interactive SVG components

  • we now ship a hybrid CJS/ESM package (this was the worst)

  • the documentation and typings are much improved!

A view to the future​

Internally, the codebase has been massively restructured, with most of the code split off into separate packages under the @liqvid namespace. I'm intending Liqvid 3.0 to be Web Components based, and usable with other libraries like Vue in addition to React.

The somewhat awkward onMouseUp={Player.preventCanvasClick} escape hatch has been replaced with data-affords="click". This allows extensions to be Liqvid compatible without having to import the library. My next big priority is cleaning up the various recording plugins and making them cross-compatible with GSAP, Remotion, and plain <audio> elements.

Other priorities for Liqvid 2.2 are a captions editor, better accessibility for non-sighted users, and internationalization.

Finally, with 2.1 out the door I'm hoping to get back to creating content with Liqvid. Be on the lookout for a Geometry and Graphics series!