What is this about?

Description:
The Mobile Development team is considering a transition from Lottie to Rive for handling animations within the mobile application. Rive potentially offers smoother performance, smaller file sizes, and enhanced interaction capabilities compared to Lottie, especially for more complex animations. The current discussion revolves around implementing a proof-of-concept (PoC) using a Rive animation of a nodding fox, which has been provided by the creative team.

Objective:
Evaluate the feasibility, performance, and benefits of integrating Rive animations into the mobile app, starting with the provided nodding fox animation.

Expected Benefits:

• Enhanced Performance: Smaller file sizes and smoother animations could lead to quicker load times and a more fluid user experience.
• Improved Interactivity: With Rive’s state machine capabilities, more complex and interactive animations can be implemented, potentially increasing user engagement.

Problem Statement:
Current animation solutions with Lottie, while effective, lack the advanced interaction capabilities and can be bulky, leading to increased app load times and a less dynamic user experience. By exploring Rive, we aim to address these issues and enhance the overall aesthetic and functionality of the app animations.

Scenario

No response

Design

No response

Technical Details

Tasks:

1. Setup Rive in the React Native Environment:
   • Install the rive-react-native package.
   • Perform necessary setups like CocoaPods (pod install) and Gradle sync.
   • Add the provided .riv asset (nodding fox animation) to the project.
2. Load and Display Rive Animation:
   • Implement the Rive animation in a suitable area of the app, potentially replacing an existing Lottie animation for comparison.
3. Connect State Machines (If Applicable):
   • If the nodding fox animation utilizes state machines for interactions, ensure these are correctly implemented and tested.
4. Testing and Performance Evaluation:
   • Test the animation on various devices to assess performance improvements.
   • Compare the file size and load times against the equivalent Lottie animation.
   • Gather feedback on user experience and interaction quality.
5. Documentation and Feedback:
   • Document the integration process, challenges, and any performance metrics.
   • Provide a comparative analysis between Rive and Lottie based on the PoC.

Threat Modeling Framework

No response

Acceptance Criteria

No response

Stakeholder review needed before the work gets merged

• Engineering (needed in most cases)
• Design
• Product
• QA (automation tests are required to pass before merging PRs but not all changes are covered by automation tests - please review if QA is needed beyond automation tests)
• Security
• Legal
• Marketing
• Management (please specify)
• Other (please specify)

References

• https://rive.app/docs/runtimes/react/react
• https://www.callstack.com/blog/lottie-vs-rive-optimizing-mobile-app-animation
• Slack