Playing video is an intensive process, especially in devices with lower specifications. Interactive video is even more taxing for the system, given the additional logic and network activity merited by the interactivity. The Eko library makes many efforts and optimizations to ensure the viewing experience as smooth as possible. However, it’s imperative that when creating custom UI thought is given to writing efficient GUI so that performance is not affected for the worse. In this guide you’ll find best practices for optimal performance.
Animation
There are two ways for you to create GUI animations: CSS and Javascript animation libraries.
CSS animations are great if you have relatively simple, non-dynamic animations. It’s important that you make the properties you choose to animate are performant ones, in order to avoid layout thrashing. For example, in order to animate a moving animate it’s better to use the translate property rather than the top/left properties.
Javascript animations libraries are another option, when your animation needs to be dynamic, or triggered from Javascript logic. A dynamic animation, for example, could be a ball jumping to reach the mouse cursor. Since the position of the mouse cursor is constantly changing, there’s no way to predefine this animation with CSS. We recommend using GSAP, a robust, performant Javascript animation library.
Layout
Unused GUI items should be not only hidden, but removed from the rendering tree. Elements with opacity: 0; still take up valuable processing time even if they’re not visually present on the page. See more in the show/hide UI guide.
Effects
Visual stylings that include opacity, shadow, glow and other computationally expensive effects can impact performance for the worst. When using these, make sure to thoroughly test your project’s performance on slower devices as part of the development process.