5 UI Motion Cases That Turn Discounts Into Delightful Experiences

We share recent online UI design cases that demonstrate how motion and visual cues can enhance user perception of invitations, discounts, and trust.

#01 Airbnb: Invitation envelope animation builds a sense of ceremony and trust

Based on a travel‑scenario emotional connection, Airbnb redesigns its invitation reward system with an envelope animation that creates a paper‑like ceremony and awakens interpersonal trust.

1. Envelope animation strengthens invitation ceremony: Using a physical‑envelope opening effect to reconstruct digital interaction, turning functional operation into a gifting ceremony and enhancing sharing willingness.

2. Visual strategy for value transmission: Large typography highlights a $70 personal gain, compressing decision time.

#02 Zomato: Smooth animation reinforces discount perception

After entering the payment amount, Zomato dynamically displays the discounted amount and a celebratory ribbon, smoothly connecting pages and greatly enhancing the sense of saving.

1. Smooth transition animation strengthens saving perception: The entered amount transitions to the next page, the original price is crossed out with animation, and the discounted price is highlighted.

2. Confetti adds surprise: After the transition, confetti and emoji animations attract attention and reinforce the surprise of saving.

#03 TrainPal: Coupon redemption with ceremony

TrainPal, a train‑ticket app, uses a scratch‑off layer animation for its coupon code pop‑up, creating anticipation and excitement similar to a lottery, enhancing the ceremony of receiving a discount.

1. Create anticipation: The scratch effect generates excitement like unveiling a gift.

2. Lightweight interaction: The auto‑scratch layer adds no operational burden and guides focus to key information.

#04 Ixigo: Instructional animation builds travel‑protection perception

Ixigo adds instructional animation to homepage cards, providing consistent visual expression throughout the flow and clearly informing users about the travel‑protection product usage.

1. Teaching animation enhances rights perception: Large animation draws attention, combining product promotion with clear benefit explanation.

2. Visual elements run through the experience: Consistent colors, symbols, and shapes reinforce a smooth, coherent experience.

#05 Grab: Visual symbol reinforces saving perception

Grab’s “Unlimited Saving” visual symbol uses an infinity sign with rhythmic animation to convey unlimited savings, enhancing the brand promise and user trust.

1. Dynamic visual symbol: The animated infinity symbol expresses “unlimited saving”.

2. Creative continuity across pages: The symbol extends across pages, forming a unified visual language that strengthens brand consistency.

These design insights aim to inspire more thoughtful, emotion‑driven UI experiences in future product work.