Using Animation Worklet
Blog post from LogRocket
Houdini's Animation Worklet is an innovative addition to web animation technologies, aiming to enhance performance by allowing animations to run independently from the main JavaScript thread. This feature enables animations based on user interactions, like scrolling, rather than being strictly time-based, offering more flexibility compared to traditional CSS animations or the Web Animations API. Although still in a draft phase and not recommended for production use, Animation Worklet can be tried in Chrome under experimental settings. It functions as a lightweight worker, minimizing glitches and optimizing performance by offloading processing tasks. By utilizing JavaScript, developers can customize animations through methods like registerAnimator, which allows complex behaviors like mathematical calculations or state-based changes. While the technology shows promise, certain aspects, such as state preservation and naming conventions, remain under development. This worklet approach opens new possibilities for native animation, complementing other Houdini APIs like PaintWorklet and AudioWorklet, all while enhancing user experience by reducing the strain on browser resources.