---
title: "How We Built the Add to Favorite Animation in Shop"
description: "The Shop app’s Add to Favorite interaction animates a product thumbnail into the Favorites tab bar heart after a buyer favorites a product. The implementation is based on a motion spec that defines animated properties, target values, durations, easing curves, and ordering, with the thumbnail sequence followed by the icon’s color and bouncing movement. In React Native, Reanimated uses one shared progress value for the whole sequence, and interpolation maps progress ranges to opacity, scale, and vertical translation, including clamping and an instant disappearance at step 3. A 50 ms pause is included between thumbnail scaling and its downward movement. The shared value also creates a match cut between the disappearing thumbnail and the icon; a setTimeout-based handoff was rejected because a busy JS thread could delay the transition, while withDelay would keep timing on the UI thread."
---

# How We Built the Add to Favorite Animation in Shop

[Shopify](https://yomu.fyi/company/shopify) · 2023-10-18 · Mar 25, 2022

**Type:** Tutorial

## Summary

The Shop app’s Add to Favorite interaction animates a product thumbnail into the Favorites tab bar heart after a buyer favorites a product. The implementation is based on a motion spec that defines animated properties, target values, durations, easing curves, and ordering, with the thumbnail sequence followed by the icon’s color and bouncing movement. In React Native, Reanimated uses one shared progress value for the whole sequence, and interpolation maps progress ranges to opacity, scale, and vertical translation, including clamping and an instant disappearance at step 3. A 50 ms pause is included between thumbnail scaling and its downward movement. The shared value also creates a match cut between the disappearing thumbnail and the icon; a setTimeout-based handoff was rejected because a busy JS thread could delay the transition, while withDelay would keep timing on the UI thread.

## Context

Shop added a feature allowing buyers to favorite products and shops. The interaction needed to animate the product thumbnail into the Favorites heart icon and make the transition feel continuous, including an immediate handoff between the thumbnail’s disappearance and the icon’s movement.

## Approach / What changed

The animation was implemented in the Shop app’s React Native interface with Reanimated. A single shared progress value sequences the thumbnail and tab bar icon animations, while interpolation maps progress to opacity, scale, translation, and icon color. The implementation follows motion-spec durations and easing curves, uses clamping where values should hold, and uses an instant opacity change for the thumbnail’s disappearance. A setTimeout handoff was avoided because JS-thread load could delay the match cut.

## Takeaways

- A single Reanimated progress value can drive multiple properties and animation steps when those properties share the same timing and easing structure.
- Interpolation maps progress ranges to output values such as opacity, scale, and vertical position; clamping keeps values at their range limits after a step ends.
- Using setTimeout to start the icon animation can delay the match cut when the JS thread is busy; withDelay would keep the timer on the UI thread.

**Tags:** [Developer Experience](https://yomu.fyi/topic/developer-experience), [Performance](https://yomu.fyi/topic/performance)

- Source: [Shopify](https://shopify.engineering/building-add-to-favorite-animation-shop-app)
- Source URL: https://shopify.engineering/building-add-to-favorite-animation-shop-app
- Ingested by Yomu: 2026-08-30T15:27:08.454Z

[Read original post](https://shopify.engineering/building-add-to-favorite-animation-shop-app)