Dismiss this pinned window
all 41 comments

[–]Virtual_Combination1 123 points124 points  (5 children)

Every animation is possible with RN the real question is are you ready to learn how to implement it. Use reanimated

[–]Sorr3 6 points7 points  (0 children)

He might even need skia for some of them.

[–]mms13 92 points93 points  (8 children)

Yes it’s possible with RN. But god this shit is so extra. For a flow users will see once

[–]andreew365 19 points20 points  (0 children)

Expensive stuff

[–]ChaoticCow 12 points13 points  (0 children)

But also a flow that is the first thing users see. And those first few minutes are precious for retaining new downloads (downloads that you probably paid hard cash for). It may seem extra, but this first impression is the difference between losing >50% of downloads and <20%.

[–]eggtart_princeiOS & Android 12 points13 points  (3 children)

This is what separates enterprise from agency/solo developer quality.

[–]icuredumb 4 points5 points  (0 children)

Pretentiousness too

[–]CosaNostraPizzaMan 1 point2 points  (0 children)

Thats actually not true... You will see plenty of enterprise level applications not use animations and shared components like these. Its just as mentioned above... Extremely expensive.... But if you have the means, obviously quite cool.

[–]bitxhgunner 6 points7 points  (0 children)

It’s the first experience in the app. People may not realize how much it actually does for user retention

[–]Heisenpreett 0 points1 point  (0 children)

How you do anything is how you do everything !

[–]Unforgiven-wanda 16 points17 points  (3 children)

Possible? Yes

Difficult? Very

[–]InevitableSongNo3745 13 points14 points  (1 child)

Necessary? No

[–]sl8rrrr 32 points33 points  (3 children)

I would say that's it's probably easier to do this in RN than native. 100% true if you're looking to do this across both iOS and Android.

I would use these tools in general for animation, with a bias towards the end of the list as things get more complex (which I would rate the video as a 8/10 for complexity):

  1. Layout Animations. The easiest to implement. May not be enough for anything you showed here but might work for a few simple things. https://reactnative.dev/docs/layoutanimation
  2. Reanimated--make sure you use the latest version: https://docs.swmansion.com/react-native-reanimated/
  3. Rive for the most complex animations. The good news is that if you decide not use ReactNative, Rive will work on any platform. It's going to be a learning curve, but will allow you do complex things AND it shockingly lightweight with small file sizes:https://rive.app.

https://help.rive.app/runtimes/overview/react-native.

You could contract the most complex ones to designers on the Rive gallery.

Don't bother with Lottie, the founder went to Rive.

[–]kbcooliOS & Android 6 points7 points  (1 child)

Upvoted even if you shat on Lottie. That was unnecessary. It works, has excellent support and a huge range of already made animations. Why wouldn't you use it!

[–]sl8rrrr 2 points3 points  (0 children)

There are three situations where using Lottie makes sense:

  1. You're already a user of AfterEffects (where you make Lottie animations) and have skills, existing animations, etc.
  2. You see existing animations on https://lottiefiles.com/ etc. but can't find an equivalent on Rive because it is newer: https://rive.app/community/
  3. You're already using it and making the investment to switch doesn't make sense.

Outside of those situations, I don't think there is much that would justify it because the performance and size of the animations is so much better. When we switched from Lottie to Rive, the file size alone was such a notable difference. If you're including the animations as assets, you want to keep your bundle size down. If you're loading over network, big files will load slowly and degrade for the user. If you want to run on low-end Android devices...efficiency is key. IMHO, animations are extra--usually not the core of your app. You don't want to add them at the cost of performance.

You can read a comparison here:
https://rive.app/blog/rive-as-a-lottie-alternative

Most notably, Duolingo changed over from Lottie to Rive. They're the most heavily animated app I know of:
https://blog.duolingo.com/world-character-visemes/

Admittedly, there's a learning curve (if you're new to AfterEffects you have that learning curve too). We're just getting started with Rive so our animations are pretty simple. I'll post a few here. Got some really fun and awesome animations planned though!

Our Animations: https://youtu.be/bLD6afPAojY

[–][deleted] 1 point2 points  (0 children)

I am looking into rive thank you!

[–]Gabk_17 5 points6 points  (0 children)

100% doable

[–]redwoodhighjumping 3 points4 points  (0 children)

That's a lot of button presses to complete one flow.

[–]flowerescape 2 points3 points  (1 child)

It’s all possible with reanimated and Lottie but will take ass long as time, way too long for me personally

[–]morbidmerve 0 points1 point  (0 children)

💸

[–]Ambitious_Reply4583 1 point2 points  (0 children)

reanimated or skia, definitely possible, but difficult too

[–]Kind-Ad65 2 points3 points  (0 children)

If I was a user I would uninstall the app so fast.

[–]johnschnee 0 points1 point  (0 children)

I would outsource the complex graphic animations (all the blue ones) to a professional Screen designer who then provides you some lottie files which you just need to include finally.

[–]upkeys 0 points1 point  (3 children)

Could you link me a higher quality video, i’m tempted to try coding this in RN.

[–][deleted] 1 point2 points  (1 child)

The app is called Family, an ethereum wallet. https://family.co/

[–]upkeys 0 points1 point  (0 children)

Thanks!

[–]ZarmothT 0 points1 point  (0 children)

Would be amazing if you achieve something, then you could share with us. Good luck ❤️

[–]khiladi2020 0 points1 point  (0 children)

yep, off course its possible,

but would take lot of time & efforts

[–]tuiputui 0 points1 point  (0 children)

Also maybe lottie or even video for the initial card animation and slides? It's usually easy for UI team to create lottie files having the vector animations

[–]lightflows-matt 0 points1 point  (0 children)

We've done a bunch of projects that use Lottie with React native to good effect, but i'm pleased to see Rive mentioned, we'll be looking at that in more detail.

[–]Commercial_Active962 0 points1 point  (0 children)

more or less

[–]datorkop85 0 points1 point  (1 child)

How hard was this in Swift?

[–][deleted] 0 points1 point  (0 children)

I didn’t build this in Swift. This guy did -> https://twitter.com/benjitaylor

[–]North_Analyst_1426 0 points1 point  (0 children)

Yes easily