How We Built the Add to Favorite Animation in Shop

"I just want you to feel it" - Jay Prince, from the song Feel It I use the word feeling a lot when working on animations and gestures. For example, animations or gestures sometimes feel right or wrong.

Shopify logo
Shopify
•
Andrew Lo
•8 min read•intermediate•
--
•View Original
React

Overview

This article details the process of implementing the 'Add to Favorite' animation in Shopify's Shop app, emphasizing the importance of user experience through animations. It covers the technical steps involved in creating the animation sequence, including coding techniques and design considerations.

What You'll Learn

1

How to sequence animations effectively in a mobile app

2

How to animate multiple properties simultaneously using React Native

3

What interpolation means and how to apply it in animations

Prerequisites & Requirements

  • Basic understanding of animations and React Native
  • Familiarity with the Reanimated library(optional)

Key Questions Answered

How does the Add to Favorite animation work in the Shop app?
The Add to Favorite animation involves two main elements: the product thumbnail and the favorites tab bar icon. The thumbnail fades in, scales, and moves down before disappearing, while the tab bar icon changes color and bounces to create a cohesive animation experience.
What is the significance of using a shared value in animations?
Using a shared value allows for synchronized animations, ensuring that the heart icon's movement matches the thumbnail's disappearance. This technique enhances the visual flow and user experience by creating a seamless transition.
What are the steps involved in coding the Add to Favorite animation?
The coding process involves defining the animation sequence, mapping progress values to animated properties, and implementing styles for both the product thumbnail and the tab bar icon. Each step is carefully timed and utilizes interpolation for smooth transitions.
Why is the match cut technique important in this animation?
The match cut technique creates a visual connection between the product thumbnail and the favorites tab icon, enhancing user understanding and engagement. It ensures that the transition feels natural and intuitive, aligning with user expectations.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend
React Native
Used to build the Shop app and implement animations.
Frontend
Reanimated
Library used for creating complex animations in the Shop app.

Key Actionable Insights

1
Implementing animations with a focus on user experience can significantly enhance app usability.
By prioritizing animations that feel intuitive, developers can create a more engaging and satisfying user experience, leading to higher user retention.
2
Utilizing a shared value for animations can simplify the coding process and improve performance.
This approach reduces the complexity of managing multiple animation states and ensures smoother transitions, especially in resource-constrained environments.
3
Understanding interpolation is crucial for creating dynamic animations.
By mastering interpolation, developers can create more fluid and visually appealing animations that respond to user interactions in real-time.

Common Pitfalls

1
Delaying animations using setTimeout can disrupt the intended visual flow.
This occurs because JavaScript execution can block the UI thread, leading to noticeable delays. Instead, using UI thread-based timing methods like withDelay from Reanimated can prevent such issues.

Related Concepts

Animation Design Principles
React Native Performance Optimization
User Experience In Mobile Applications