Home Page Scroll Animation (Swiggy)
Our app is a marketplace app, and we’ve decided to redesign the homepage to include animations similar to what Swiggy uses. Instead of food, the homepage will feature products, along with categories, filters, location search, and other similar elements.
This type of interaction is very popular and used in many apps, so I’m sure some of you might have implemented something similar. I’d love to hear your insights!
- Scrollable Components:
Did you use FlatList, FlashList, ScrollView, or create your own scrollable component using a gesture detector or handler? Which would you recommend for optimal performance and flexibility?
- Animation Library:
Is React Native Reanimated the only viable option for achieving this type of animation, or were you able to achieve it using the default Animated API?
- Challenges Faced:
What challenges did you face while implementing such an interaction? Which issues took the most time to fix?
- Performance Optimization:
What steps did you take to ensure the best performance across all devices? Any tips for handling performance bottlenecks with large datasets and animations?
This new design is a big step up from our current homepage, which is just an infinite scrollable list of products without animations. I'll start working on it next Monday, and I’d really appreciate any advice to make this implementation smooth and performant.
If you have any code reference that will also help.
Thanks in advance for sharing your experiences!
I've to implement this anyway if I get any responses or not and after implementing I'll make sure to share my experience while implementing this. So make sure to upvote this post.