How We Built the Add to Favorite Animation in Shop - Shopify

What this post added

This post details the implementation of the 'Add to Favorite' animation in the Shop app using React Native and Reanimated. It explains how to sequence multiple animations (product thumbnail fade-in, scale, and slide; favorites tab bar icon color change and bounce) by mapping a single shared progress value to different animation steps. It covers interpolating properties like opacity and scale, and achieving a match cut by ensuring the tab bar icon animation starts immediately when the product thumbnail disappears. The post also contrasts using a shared value with setTimeout for animation sequencing, highlighting the former's advantage in maintaining UI thread responsiveness.