Why does a product animation export successfully but its mask look different in the storefront player?

1. Identify the preview renderer and the storefront runtime separately

Illustrative exercise: the masked bottle and the two storefront ownership cases are fictional. No AE, Creator, player, export, upload or generation test was performed.

The designer's preview is a reference environment, not necessarily the engine installed on the merchant's website. LottieFiles documents Automatic, Lottie Web (SVG), and dotLottie Player (ThorVG) preview choices. The full preview's overflow menu leads to Player settings, where the renderer can be selected. The appropriate preview depends on the animation and the intended destination.

Ask the development team for the actual runtime family, installed version, and whether that version can be changed. Avoid accepting answers such as 'the site supports Lottie' or 'we use the standard player.' Those descriptions are insufficient to establish which animation features can be rendered.

Keep the file format in the same conversation. A legacy lottie-web destination generally calls for Lottie JSON. A .lottie container requires a dotLottie-aware runtime. Do not assume that a traditional lottie-web integration reads a .lottie package directly.

2. Check the file's features without treating warnings as visual proof

A mask discrepancy is a reason to investigate the animation's actual feature inventory, not evidence that every mask is unsupported. LottieFiles describes a file-specific Feature checker available through its workspace file view. It identifies features and specification information and provides compatibility flags for major runtimes.

Use the inventory to create questions for the developer: Does the installed runtime version support the relevant feature? Is the selected renderer appropriate? Was an expression-dependent behavior converted as intended? Which differences still require direct comparison?

The published compatibility matrix includes entries marked as needing testing. Such entries must remain uncertain rather than being promoted into universal support or failure rules. Likewise, an export without warnings cannot certify identical rendering across engines.

Keep this investigation focused on renderer behavior. If the product photograph itself is absent, first use a separate linked-asset handoff check; missing image files and incompatible mask rendering are distinct failure mechanisms.

3. Select the remedy according to who controls the player

Branch A — Vendor-locked storefront: The commerce provider uses an older player version and cannot upgrade it for this campaign. Record that constraint before revising the artwork. Ask the animator to author or adapt the reveal using features demonstrably supported by that installed version. Where the placement permits it, propose an approved noninteractive rendered fallback, but do not promise that it will reproduce every behavior or fit every placement.

Branch B — Merchant-controlled storefront: The development team can update the runtime. Choose a specific supported library version and compatible file format, then assess the required mask behavior in that target environment. Installing the newest available package is not itself an acceptance test. Changes should follow the site's normal release and rollback process.

In either branch, distinguish an engineering decision from a visual approval. A compatible format and a favorable feature report establish useful prerequisites, but the masked product details must still be reviewed on the actual destination.

4. Write a contract that a merchant can approve

The handoff contract should identify the exact animation file revision, intended runtime family and build, file format, required visible features, approved product reference, and reviewer. Specify the frames or moments where the mask boundary matters, including the beginning of the reveal, the fully visible product, and the transition away.

Ask reviewers to record whether the label remains legible, the product silhouette stays within the intended reveal, and no unintended content appears outside the mask. Compare against the approved reference rather than relying on the statement that the animation plays.

Mark the outcome approved, rejected with a reproducible discrepancy, or awaiting target-runtime verification. This is a proposed acceptance method, not a claim that any particular player, mask technique, or fallback has been tested successfully.

Storefront Runtime Contract and Mask Acceptance Worksheet

These are illustrative exercise rows. Save a copy and record your own observations; the example is not an executed acceptance test.

Download review worksheet (CSV)