Meet s1-lottie: a light wrapper component for airbnb web lottie library.

Few weeks ago I posted an article on the SentinelOne’s blog regrading the way we used airbnb’s lottie web lib for implementing some cutting edge animations.

SentinelOne UI part which uses s1-lottie

I really recommend reading the article for getting a better grasp of the motivation we had when decided to use lottie, and the way we generally approach animations and micro interactions.

On this post I want to quickly review some technical parts of the tiny Angular component we published under the SentinelOne domain — s1-lottie.

The s1-lottie goal is to proxy the lottie’s instance functionalities for a safely use on your Angular application. (If you’re not familiar with the lottie lib, shortly: it enables rendering after effects animations on the web, and control them using javascript).

Let’s review the techniques we used for making the lottie component “Angular ready” and so easy to integrate:

We’re taking into account Angular’s lifecycle hooks by referring the lottie’s player host after its container was initialised (ngAfterViewInit).

We’re optimising performance by escaping Angular’s change detection upon any animation loading (optional by passing a boolean input).

We’re destroying the lottie instance upon the component destruction.

We used the official lottie/types (Typescript) for proper typing.

We didn’t overkilled the component with redundant abstractions. we’re just proxying the lotties abilities/custom events as is — easy to debug.

We’re installing web-lottie for you as peer dependancy.

We’re pausing the lottie player when the host element is not visible to the user.

You’re welcome to star the repo, play with the code, and contribute if you like :)

Cheers,

Liron.