In the world of digital signage, dynamism is essential. Unlike traditional paper communication, videos and animations play a crucial role in capturing attention and delivering messages effectively. This text focuses on content-related animations, rather than those integrated into pre-rendered videos. To explore this distinction, you can check out our article video vs scene.

Animation families in Disign

In Disign, we primarily distinguish between two main types of animations:

1. Transition animations: These occur between different elements on the screen. Transition animations help smooth the transition from one piece of content to another, creating a more cohesive user experience.
2. Element animations: These focus on animating a single element. Element animations can enhance content by adding visual effects that attract the eye and reinforce the message.

Both types of animations contribute to making your digital signage more engaging and visible. For hybrid applications combining digital signage and interactive touch content with Disign Studio, animations also play a crucial role in providing useful information to the user. They are essential for ergonomics and user interface (UI).

A common piece of advice for our Disigners: it's crucial not to overuse animations. Excessive use can overload the readability of the message. Use them sparingly to maximize their effectiveness without compromising clarity.

Enhancements to the animation rendering engine

We have recently updated Disign's animation rendering engine to offer improved performance. This article, although technical, may interest developers and advanced users who wish to understand the recent changes.

Optimized performance

Disign is designed to be high-performing. To ensure optimal smoothness for web applications, we aim to achieve 60 frames per second (fps). Every development in Disign is oriented towards this goal, ensuring that the code is executed in 16 milliseconds per frame.

To meet this performance requirement, we use various advanced technologies, such as Web Workers, sandboxed iframes, WebAssembly (WASM), and caching. These technologies allow for optimal use of machine resources without compromising the display. Even if these terms seem complex, rest assured that we are doing everything possible to ensure smooth and glitch-free performance.

New rendering technology

The new rendering engine uses the Web Animation API of browsers, a technology similar to CSS but with increased customization and programmability through JavaScript (JS). The previous Disign engine used JS to animate GPU-accelerated CSS properties (such as transform and opacity). However, this could affect animation if the CPU was fully utilized.

With the Web Animation API, we delegate the animation work to the GPU, allowing the CPU to focus on orchestration. The result: animations are now smoother, even under high load from Disign.

In summary, the enhancements to the animation rendering engine ensure a smoother and more responsive user experience. Our efforts to optimize performance guarantee that animations enrich your digital signage without compromising quality.