Animation performance is vital for creating smooth, responsive user interfaces. Poorly executing animations can detract from the overall experience, making it feel clunky and unresponsive. The article breaks down animation performance into a tier list, helping developers understand which techniques to use, which to approach cautiously, and which to avoid altogether. The article explains the browser's render pipeline, highlighting three main steps: layout, paint, and composite. Triggering one step necessitates running all subsequent steps, making it important to minimize layout and paint actions for better performance. Animations that run entirely on the compositor thread (S-Tier) are the most efficient, maintaining high frame rates even when the main thread is busy. Techniques such as animating transform, opacity, filter, and clip-path values are recommended for smooth animations. JavaScript libraries that rely on the main thread can introduce jank, especially when the thread is blocked. Some animations may seem hardware-accelerated but can fall back to the main thread if the compositor engine doesn't support certain features. Safari, for instance, tends to struggle with this due to its reliance on macOS's Core Animation framework. Additionally, creating large layers for S-Tier animations can lead to high GPU memory usage, especially on mobile devices. Techniques like the Motion+ Ticker mitigate this by using a reprojection renderer to manage memory better while still delivering effective animations.