LottieFiles / dotlottie-web

Official LottieFiles player for rendering Lottie and dotLottie animations in the web. Supports React, Vue, Svelte, SolidJS and Web Components.
https://developers.lottiefiles.com/docs/dotlottie-player/
MIT License
106 stars 7 forks source link

web: move offscreen & partial rendering optimizations from the wrappers to dotlottie-web #277

Open theashraf opened 2 weeks ago

theashraf commented 2 weeks ago

to ensure performance consistency and feature parity among dotlottie-web wrappers, two performance optimizations were introduced in the dotlottie-web component wrappers only:

  1. Freezing and unfreezing the animation when it's offscreen and not visible to the user: This saves resources by pausing the animation when it's not in view.
  2. Rendering only the visible areas of the animations using the setViewport API: This optimization also saves resources by limiting rendering to the areas that are actually visible.

These two optimizations should be integrated into the dotlottie-web codebase to ensure consistency across implementations.

Changes:

Since these optimizations are performance and rendering related, they can be integrated into the RenderConfig of the DotLottie instance:

export interface RenderConfig {
  useRenderVisibleAreaOnly?: boolean; // default to true
  useFreezeWhenInvisible?: boolean; // default to true
  devicePixelRatio?: number;
}

These optimizations should be enabled by default, allowing users to disable them if needed through the setRenderConfig API.

theashraf commented 2 weeks ago

related #273