How Do I Animate a Sale Price Without Briefly Showing the Wrong Number?

Define the actual price states first

Before animating any numbers, identify the exact product, variant, market, currency and approved offer. Record the old and new prices only when the merchant's actual pricing evidence supports both.

Decide what the animation is meant to communicate. It may reveal one current price, replace an outdated amount with a new one, or present a verified before-and-after promotion. These are different claims. A transition between two numbers does not establish that a discount was actually offered.

Keep the product image and offer record linked. The existing from-price guide explains why the price of a pictured variant must not be confused with a cheaper family starting price. This article concerns a different failure: even when the endpoints are accurate, the intermediate frames can create an additional unintended amount.

Choose an atomic transition

A risky design animates individual digits independently. If the tens and units positions change at different moments, the viewer may briefly see a hybrid amount that is neither the old price nor the new price.

Instead, consider treating each complete price as a separate title or graphic layer. One complete amount can fade or slide away while another complete amount appears. The editor must still inspect the overlap: simultaneous visibility can be confusing if both numbers appear equally current.

Use a clearly differentiated old-price treatment only when the offer history supports it. A strikethrough or discount label is not automatically truthful simply because it looks familiar in an advertisement.

In an external video editor, preserve the price as editable text or a separately controlled overlay when possible. Do not rely on a generated background animation to reproduce every digit correctly. The specific transition and timing controls depend on the chosen editor.

Inspect the entire transition, not just two frames

Review the rendered transition frame by frame at its actual output frame rate. Record every distinct number that appears, including partial digits that can be read as another amount.

Check the currency symbol, decimal separator, thousands separator, units and any qualifying text. A price may be numerically correct but misleading if its currency disappears during the animation or if a promotional condition appears only after the amount has been displayed.

Inspect the final exported file, not only the editor timeline. Rendering, frame interpolation, compositing and downstream processing may affect how quickly the digits appear. Do not claim that a source timeline guarantees identical playback on every platform.

If an intermediate amount is ambiguous, simplify the motion. A clean cut between complete prices may communicate the offer more accurately than a complex rolling-number effect.

Hypothetical case: a price changing from $39 to $29

Hypothetical advertisement exercise; no editor, merchant offer or video was tested. A fictional desk-lamp campaign has an approved illustrative old price of $39 and a proposed new price of $29. These figures are exercise inputs, not real offers.

Candidate A animates the digits separately and is stipulated to show $32 briefly while the tens and units positions move at different times. That unintended amount is rejected.

Candidate B treats $39 and $29 as complete graphic states, using a short transition without constructing a third number. B is a conditional candidate: the editor must inspect every rendered frame and the merchant must verify the actual old-price claim, current offer, currency and selected landing variant.

If the old-price evidence is missing, use only the verified current price rather than implying a historical discount.

Record your own observations

The filled rows are illustrative examples. Use the blank row for your own files and observations.

Download the editable CSV worksheet

What the references establish

• Adobe Premiere — Animate text and graphics: Primary documentation for animating text and graphics as controlled elements. Supports the external-editor implementation; the atomic-price review is original editorial guidance.
• Google Merchant Center — Price attribute: Primary merchant-data documentation for submitted product prices and their relationship to the actual offer. Supports verifying the underlying current price, not the animation method.