---
title: Animations and Add-on Libraries
slug: develop/animations-and-add-on-libraries
docTags: 
createdAt: 2025-03-11T07:03:32.131Z
---

This page outlines support for animations and add-on libraries for the Chromium engine on BrightSign players.

:::hint{type="success"}
Limit file directory depth to prevent issues caused by overly complex folder structures.
:::

## JavaScript Animations

Animations that use JavaScript timers, including the jQuery® .animate() library, do not make efficient use of GPU resources and are not accurate enough to achieve smooth animations. For this reason, we recommend using CSS animations whenever possible. The jQuery® [Transit library](https://github.com/rstacruz/jquery.transit) uses CSS animations and provides an API similar to the .animate() library.

:::hint{type="info"}
For best results when animating images, we recommend using images at their original size instead of scaling them first. For example, a 480x270 icon will rotate more smoothly if you use an image that is originally 480x270, rather than scaling down a 1280x720 image and then attempting to rotate it.
:::

## WebGL

BrightSign players support the OpenGL API for JavaScript (i.e. WebGL). 

:::hint{type="info"}
Textures will sometimes fail to load in WebGL because they exceed the allowed [image size](docId\:gZcaQrOoR8-ZaRNrEPKN1) on BrightSign Players. In these cases, you can use [roVideoMode.SetImageSizeThreshold()](docId\:QQ734nQz0hCwNI0uNSdMP) BrightScript method to increase the maximum size for textures.
:::

## Vector Animations

The SVG protocol should be used to specify vector animations.

## Canvas Animations

Bitmap animations display smoothly when they are 1/3 or less of a 1080p HTML canvas. Setting the canvas size to 720p allows for larger high-quality animations to occupy the screen.

## Push Technology

The long polling technique has been tested and proven to work on BrightSign players.

The Websocket protocol is fully supported via the [Node.js](docId\:vlSKfVzeQu04pD58rvXam) implementation on the BrightSign Chromium instance. In production environments, we recommend using HTTPS to initiate Websocket connections with a server (i.e using a WSS connection rather than a WS connection).

An example Websocket application is available on the [BrightSign Github](https://github.com/brightsign/websocket-test) page.

## File Storage

BrightSign players support several file storage/indexing technologies, including Web SQL, IndexedDB, the HTML Filesystem API, and the JavaScript *storage* class. The location and size of the web storage database should be set during initialization of [roHtmlWidget](docId\:xljq5_YhDmA2SSmpZimtK).

## File Downloads

If you're using JavaScript to download files, we reccomend using the Fetch API and Node.js® File System module to perform downloads. See [this page](docId\:vlSKfVzeQu04pD58rvXam) for more details

## CSS Transforms

All CSS transforms should be specified as WebKit transforms. When performing a transform on a  or graphics element, you should not specify the transform in-line.

:::Iframe{code="<div>"}

:::

The following code shows an example of an effective CSS transform for a BrightSign player:

**Example:**

```text
<style>
 
                .flipme{
                -webkit-animation-name:flipon;
                -webkit-animation-fill-mode:forwards;
                -webkit-animation-iteration-count:1;
                -webkit-animation-duration:2s;
                }
 
 
@-webkit-keyframes flipon
{
0% {-webkit-transform:rotateY(0deg);}
30% {-webkit-transform:rotateY(-90deg);}
100% {-webkit-transform: rotateY(360deg);}
}
 
</style>
```