Jed Bartausky:

Welcome back to another episode of the React Native Radio Podcast, episode three 20 Silky Smooth Animations with Catalina Miron.

Jamon Holmgren:

Hey everybody, we have a fun episode in front of us. I'm Jamon Holmgren, your host and friendly CTO of Infinite Red, and I'm joined today by my co-host Robin Heinz, our director of engineering here at Infinite Red Mazen is not in today, but in his place. We have an awesome guest, Kaline Miran, welcome, Kaline. Of course, you and I have known each other for quite some time. I don't know, we met in 2019 or something like that. It was back in the day, but you've been around from the very beginning as well, doing all kinds of stuff. Let me read your bio here really quick. Creator of animate react native.com. Go bookmark that everybody, the biggest React native animations collection in the world. He's been a developer for over a decade, having worked at 11 Labs, Hootsuite, Microsoft, and Skype, and helped lots of startups as a contractor. He's spoken at several conferences. I think that's how we met, was speaking at a conference together, appeared in several podcasts including this one before we took it over. Actually, right before we took it over, you had one of the most recent episodes in the one seventies, I think it was the episode number. And then you also have a YouTube channel, 31,000 subscribers.

Catlin Miron:

Yeah, that's crazy. Is that right? That's

Robin Heinze:

Impressive.

Catlin Miron:

That's wild. That's crazy. Yeah, that's wild. Good job, man. Given the fact that I was missing from this ecosystem for a while now, it's crazy.

Jamon Holmgren:

Yeah, absolutely. You also love contributing to open source and sharing behind the scenes on Twitter slash x and you do love animations, but I think that one of the things we want to talk about is you do more than animations. You also do a lot else on the UI side and reusability and whatnot, so we'll get into all of that in just a moment. But before we get into that, let's hear from our sponsor. Our sponsor is by company Infinite Red. We are a premier React native consultancy located fully remote in the us. We're a team of 30 senior plus level React native developers and a few others who, I dunno probably get annoyed by how much we talk about React native, but there aren't very many of them. I'm just looking at Justin's face looking for a reaction right now.

Robin Heinze:

They do get annoyed when we talk about React natives incessantly.

Jamon Holmgren:

Yes, exactly. Oh, he just put in chat, react native pays my bills. I love it.

Robin Heinze:

That's a good attitude. Anyway,

Jamon Holmgren:

If you're looking for React native expertise and to make sure that Justin has a job, hit us up at Infinite Red slash React native. And don't forget to mention that you heard about us through the React Native Radio podcast, so Robin and I have a job as well.

Robin Heinze:

Yes.

Jamon Holmgren:

Alright, let's get into our topic for today, Kathleen. We're going to go into all kinds of things about animations of course, but we're going to talk about some other things as well. But before we get into that, I want to ask, how did you get into coding over a decade ago?

Catlin Miron:

Well, that's actually a good question. I didn't want it to say two decades, but over a decade sounds even better, I believe.

Jamon Holmgren:

Just say two decades. That's what I do.

Catlin Miron:

Yeah, so everything have actually started it. I had a single friend, the only friend that was coding almost 20 years ago, he was using a Dreamweaver. Most probably everyone that's 30 plus maybe? Yeah. Oh yes, the good old days.

Robin Heinze:

What was that like 2013 or sorry, 2003, that kind of era.

Catlin Miron:

Yeah, somewhere around there. Yeah, that was the era

Jamon Holmgren:

I had Dreamweaver MX 2004. It was before Adobe bought it and ruined

Catlin Miron:

It. Oh yeah, yeah. When you also had fireworks it is like everything like Illustrator.

Jamon Holmgren:

Exactly.

Catlin Miron:

Yeah. So he knew how to do websites and everything. It's like what you see, it's what you get. Of course you can also write code. It's like a bi-directional way of doing it. So this is how I started. Basically, I was always going to him, Hey, can you teach me how to do that? And that I didn't even own a computer back then, so I also had to go somewhere to find a place to do it.

Catlin Miron:

When I was, I think on my 10th grade, in my 10th grade year, I had to go to Malmo, Sweden to create a website for a university that we were exchanging some. We are basically exchanging some informations between my school and their university. So our job as students was to create a website, dictionary based website where we were sharing Romanian words, English words and Swedish words, so you can learn something while surfing the web. And that was my first website actually that I had to build along with some of my colleagues back then. And together with them, we also had to relocate ourselves for one month tomorrow, which was like a socra degree experience exchange sort of thing. And then I moved to the university and then everything started to take shape in my mind. By the way, I'm just an electrical engineer by heart, so yeah, computer science is just something that I did as a side project all the time and just a side hustle, let's say.

Catlin Miron:

So during my first year of university, I ran out of money, as most of you probably did the same. So I had to have a side income and I have started to learn JavaScript, PHP and HTML and CSS plus web design. So pretty much that's the whole story. And then the rest is history. On my first year of Master, I have received a job at a small company in Romania and basically since then I'm just doing it front-end developer. Then I moved to Uber View and it was acquired by Hootsuite, which is the social media platform that's doing analytics. And back then I remember that we were doing backbone jazz and

Robin Heinze:

Oh my God,

Catlin Miron:

I actually helped the team. Yeah, it's crazy, but hear me out. So we have built framework on top of backbone, which is called Mosaic js, and it's exactly as React is doing it now. So you have widgets because backbone was not, it was really hard for you to reuse any components or to hook to any particular properties down the road. So we have built this mosaic that was this puzzle or yeah, you could stack pieces on top of each other and you could create a single page application and you could subscribe to different channels that you're interested in. I dunno, users slash user ID and things like that. So everything was coming through you via those channels and we were updating the dom basically in real time, which was incredible.

Robin Heinze:

Wow, that really was like react before React.

Catlin Miron:

Yeah. Especially it was written in coffee script, but yeah, that's another aspect of it.

Robin Heinze:

Coffee script.

Catlin Miron:

I love Coffee Blast from the past. I love coffee script.

Robin Heinze:

Coffee script was all the rage when I started programming in 2014.

Catlin Miron:

The Fat, oh no bin.

Catlin Miron:

Yeah, it's great. And then after the acquisition, we actually had to rebuild everything because we had this opportunity to rewrite everything. And one of my colleagues actually came with this idea, Hey, why we are not giving Reactor TRY is this new tool that was built by Facebook back then. It was really, really early stage. I dunno what version, there were no plugins, no packages, no nothing pretty much. And we have started to react. We actually had some open source projects, we have created high charts wrappers for React. And because of that project, after two years or so, maybe even less, one of my colleagues actually was invited to San Francisco when at React Conf and during that conference React native was announced. So basically whoever was in the audience gained access to this private repository pretty much. And I remember because I was playing with Swift, just, I dunno, two or three months before the conference because I wanted to do something on the mobile as well.

Catlin Miron:

And when he came back he told me, Hey, I have access to this tool that you can build potentially in the future cross platform mobile applications. Because initially it was only iOS. So I said, oh yeah, that looks actually, that's really interesting. Yeah, this is what I would like to do in the future. And just going through the source code and everything, for me it made sense because I already had React experience and just going to react native. It was just a view and a text or a text input instead of a div or span and the paragraph. And I quickly created, I believe after maybe six months after React native was released, I have published the very first complete application in React native, which is a dribble clone,

Catlin Miron:

An end-to-end application. I had an Apple developer account back then to publish everything, but you get the idea. And I was actually using the navigator iOS for example. I also got to know obl, which is the creator of Free Native Vector icons. And I had showcased basically the power of free and the community was amazing. I have received ton of positive feedback because of this open source project and I have started to dedicate almost my entire free time to open source and react native in general. And after a while my daughter was born and I could not do it anymore. Basically I was doing react by day and react native by night and suddenly I had to stop look for different opportunities and this is how I actually landed on a job at Microsoft and Skype, especially at Skype, we are doing a cross-platform unified solution through React xp, which is built on top of React, react native and Electron.

Catlin Miron:

And back then when I joined, we were basically the biggest company in the world that was using Electron. There was no other company near Biased basically. And yeah, I dunno. Meanwhile, I was also doing learning by doing series, which is something since I'm a self-talk developer, I know the struggle. I know how hard it is to learn new things and how many blockers you may encounter down the road. So this learning by doing it, I'll just hit that roadblock and then take a step back, reflect on that, see how can I find the solution. I dunno, search over Stack Overflow or Google or tweet about it and then I dunno, two days later I'll have a solution even though it's not the best solution, at least I have learned something during this process. So I was learning by doing and also learning how to enjoy the process of failing. Pretty much

Robin Heinze:

You learn more from your failures than you do from your successes almost.

Catlin Miron:

Oh yeah, agreed. 100% agree. It's like I'm still failing quite a lot even though it's like because everyone, especially on my Twitter, they see only the outcome. It's like this nice animation or this application or X, Y, Z, but they don't know the journey itself. For me, the outcome doesn't matter the journey, it's what matters the most because from this journey I can get everything, all my learnings basically. So yeah, and afterwards I had the chance to actually join 11 Labs, the first mobile developer and I have created the first version of the mobile application, which was released to the English speaking countries, us, uk, Canada, and Australia. And then I moved on with my life as a solo developer. Yeah, so currently I'm jobless.

Robin Heinze:

And you did that with 11 Labs back in, was that back at the beginning of React native?

Catlin Miron:

No, no, no, no. It's just one year ago. Actually one year ago. I've joined 11 labs, I've stayed with them for nine months and at the beginning of the summer I want to go on a long vacation just to get into, I dunno, vacation mode and we had to decouple each other. But yeah, we had to apart,

Jamon Holmgren:

It's an interesting journey because you are the type of guy that is interested in so many different things. You have this insatiable curiosity and drive to experiment and do different things. I'm just imagining you with Dreamweaver trying to do smooth animations on the internet Explorer six. Oh, that's what I was thinking about was like the Catalina Miron A for Internet Explorer six.

Catlin Miron:

Oh no. Yeah, so I actually have a small story in regards to that.

Jamon Holmgren:

Oh great. Okay,

Catlin Miron:

Let's hear it. This colleague of mine that came up with this idea, Hey, let's give React a try back, he was our team lead, like the frontend team lead back then. His nickname is kidding. He created React Cosmos, which is this framework that you can render encapsulation any component and you can pass a fixture, basically a set of properties and you can render in any state. And he was doing some, he was recreating Warcraft three menus in flesh. And so I also had to, I jumped into that and gave it a try. It was really hard, just believe me, it's like flesh, it's awesome, but it's really hard. So he was doing a lot of action script. I didn't even knew how to read the code. In my mind. Everything was completely a mess, but I gave it a try. It was really hard. Maybe now if I have this opportunity to go back and do something with my current knowledge, maybe I'll try to do some animations, but it's quite hard. It's like animations in flesh, especially Warcraft three menu type of animation. It's really hard to accomplish.

Jamon Holmgren:

I was wondering, is this you just trying to recreate the experience you had in Flash? It feels like a lot of the stuff that you do is stuff that Flash did really well.

Catlin Miron:

Yeah, I mean I'm mostly trying to solve developer struggles pretty much with three animations. I dunno why, because I have this curse of knowledge. I dunno exactly why. What other developers don't know. For me it just works. I may struggle with other things, but not like let's call it unquote simple things. So I'm just trying to come with different solutions to problems that developers on X, for example, are posting or talking about or struggle with. I'm not trying to recreate. I mean in a perfect world, I think doing everything as you could have done it in flesh, I think that would be fantastic, especially in React native animations. But yeah, it's just solutions to struggles basically.

Robin Heinze:

Dude, when people come to you and they're just struggling with animations, what's the biggest thing that they struggle with? Is it the math? Is it just knowing the API? What do people really struggle with animations that you found?

Catlin Miron:

I think the fundamentals is the most critical one. A lot of developers, they don't go through the documentation and they're not trying it out while they're parsing the documentation.

Robin Heinze:

Well, because so easy to make an app that doesn't have them. It's optional. I don't believe it's actually optional, but you could make a functional app without it. So there's nothing that's forcing you to get through it and learn it in order to have a working app.

Catlin Miron:

Yeah, I believe this is true and I actually gave a talk a while ago and I was going through exactly this pain point. So especially for the mobile users, animations, it's a must, not only a must, but it's what it's going to keep them inside your application most probably because it's going to separate you from the competition pretty much.

Catlin Miron:

And I believe, I'll give you an example, just a couple of days ago, linear published their application and nowadays everyone is discussing about their mobile app, about fancy animations or the micro interactions, even though they are familiar with the mobile, the web app, which is a fantastic application, really fast, really snappy. They did the same with the mobile app. So they users have have those expectations and usually whenever they will land on your application, I believe animations play an important role on keeping them inside the application because the retention rate is going to draw quite significantly from the first install to, I dunno, one day usage.

Robin Heinze:

Yeah, I definitely don't like every successful app is going to have to have really stunning animations in order to capture users, but it's such a hard thing to get developers to learn without forcing them. It's not always intuitive. It's not intuitive and it's very different from a lot of the other things that we know as developers. It's such a different way of thinking about code. So yeah, you're doing a good thing by helping people learn.

Jamon Holmgren:

It's true. And also react is a declarative syntax. You have the JSX and then when you move to a new state, which is typically where an animation would happen, you're just rendering the new state, right? Historically animations have kind of been left out in the cold a little bit like, okay, new state, yay, CSS handles this with that, what is it? Transition property, which will just kind of animate between the states. But I don't know, Kathleen, do you have thoughts about this? I guess I don't really have a question. The main point here is that we're working in a declarative syntax world and how do you think about the syntax, about how we handle it, about the idioms and whatnot?

Catlin Miron:

Yeah, I think this is where Reanimated moved it to the next level because

Catlin Miron:

Previously you had layout animations example in React native that came directly in the bundle with React react native, but they were not that performant and you had different things happening on iOS and also on Android, so you could not create a truly cross-platform or unified experience and you had a lot of if statements and it was really hacky. And I believe we animated two, especially Reanimated two came with this paring shift I would say with layout animations entering and exiting, which stands for mounting and unmounting of the components in a really declarative way. So instead of, as you mentioned with CSS, you have transition and you can specify transition, all transition opacity with three seconds and do it infinitely, I dunno. And the same, it's actually true for layout animations and entering and exiting where you can specify enough for this particular element, make it an animated component, and then just specify if the layout is going to change animated using this linear transition configuration or if it's going to be mounted at a point in time, apply this entering animation or the same applies for the exiting, and I believe you have a lot of options because there are over 76 different built-in animations that you can apply for those entering and exiting animations.

Catlin Miron:

That's going to increase by 50% the user experience just by doing layout animations. This is what I'm also trying to do now with my YouTube through my YouTube videos just to show the power of layout animations and entering and exiting animations and what you can actually achieve with just three lines of code and everything is really declarative because if you go, as you mentioned with math, with initializing different shared values or what's a shared value, what's an animated value? But wait, that component has just re-render. I lost the state where it's going to increase the complexity of the things. But I believe just starting with layout emissions entering and exiting, and by the way, you also have key frames exactly as you have in CSS, so you can also specify what 10% do that and 100% do that, and it's going to automatically animate between those states or those animation states for you so you don't have to do anything basically. And yeah, I think I saw this as a problem a couple of years ago, but now I believe we're in a very good state, just thanks to Reanimated. Yeah, I believe it added a lot of value to this entire community.

Jamon Holmgren:

Do you install reanimated on every project that you do?

Catlin Miron:

Amen to that? Yes,

Robin Heinze:

Yes. It should be default,

Catlin Miron:

Yes. It just, yeah, except Reanimated V one. No,

Robin Heinze:

No, it's got to be two was V two at least.

Catlin Miron:

Yes, yes. V one was just the road to V two basically. I mean, does anyone do it

Robin Heinze:

Right in V one?

Catlin Miron:

Yeah, when I see that much code is like it takes some time to write a simple and elegant solution, but usually this thing is not easy to do. It's quite hard to write simple things and understandable things, and I believe Reanimated one was in this timeline where they're writing everything really, really not bad, but you are not able to read it or write it properly and just because it was the road to V two to make everything really easy.

Robin Heinze:

So unfortunately we're getting kind of low on time, but there's a few more things I wanted to touch on. One for our listeners who are adding animations, either your animations or any reanimated animations, automated testing is getting to be super important, especially for enterprise companies and who have a lot on the line. They want to make sure their apps are really tested. Is there a way to really thoroughly test animations? Do you have any advice or is manual testing just the answer?

Catlin Miron:

That's actually a difficult question. I believe manual testing, but for example, you can enable reduced motion and just move with it just from a business logic perspective and don't care that much about animations because those are visual effects.

Jamon Holmgren:

Can you explain reduced motion for a second?

Catlin Miron:

Yeah, reduced motion. It's for impaired persons that it's quite like accessibility, right? Accessibility. It's an accessibility feature that's going to just enable the opacity and just two or three properties that you can play with or animate. Like for example, on my Mac right now I'm using reduced motion and just swiping between workspace is just a quick fade in or fade out animation. There is no slide, there is no moving parts basically on the screen. So in this way we can also help persons that, I dunno how to say that there are persons that suffer from motion or

Jamon Holmgren:

Sickness.

Catlin Miron:

Yeah,

Jamon Holmgren:

That's right. Yeah.

Catlin Miron:

In reanimated for example, you have access to it directly via hook and you can decide what to do based on that return value. Most probably you're going to animate Z opacity.

Jamon Holmgren:

Yeah. Tell us about animate react native a bit more. What's it all about? Why should people be interested in it?

Catlin Miron:

Yeah, so I've created anime react native.com platform just because I wanted to share all my animations that I did since the beginning pretty much

Jamon Holmgren:

Not just the knowledge, but the actual

Robin Heinze:

Animations you can pay and just use the animations that you created in your app.

Catlin Miron:

Yeah, once you have a license in place, you can copy paste the code and do whatever you'd like to do,

Robin Heinze:

Which could be a really good way to learn. You were talking about earlier learning by doing. I am a perpetual learn by example. I am pretty hopeless at just reading the docs and understanding, but if you give me something that's working and then show me the code, I'm like, okay, that goes to that and that's why that's happening and like, oh, okay. That's why I learned so much more quickly having a really good working example, and so that would be super valuable for someone like me.

Catlin Miron:

So those are ready to paste basically components, not everything, but at least 50% of those animations are copy pastable and ready to use in any project

Catlin Miron:

Recently in the last 30 or 40 different animations, what I was trying to accomplish is to respect a particular API. Like for example, if that's a list that I'm animating, I'm just trying to have the same API or as close as possible to a flat list or a flash list, or if I'm building an animated switch, I would like to have the same API, as you are familiar with from a switch on change and all the properties along with the animation itself. I'm also creating an example how to use that. And yeah, it was a great journey with those animations and I'm not doing only reanimated. There are also examples with animated API, which is the library that reactive comes with because maybe Jamie and you have asked me about reanimated. Maybe there are old projects that you are just stuck somewhere and you cannot upgrade, you cannot add reanimated. So in this way I came to rescue with different animated API solutions and pretty much just sharing the knowledge but also ready use component and mechanism through which you can struggle with the code and understand what I was doing there and how I came up with that solution. And that also involves math. For example, I have created

Catlin Miron:

Different animations that involved different distances like shapey shape for example, and also trigonometry for example, to calculate some angles. I have a balloon slider that I've created a while ago, and based on the motion or how far you are from the previous point, or if you scrub really fast through a slider, it's going to calculate that angle using math arc tangent in this example, just to calculate the angle.

Robin Heinze:

That's really, really, really cool. You're talking my language as I was a math major. It's been so long that it's all been replaced in my head with other things, but I always enjoyed the math part of animations more than making that translate into code. So yeah, I'm always excited to see some cool math.

Catlin Miron:

Yeah, it is fantastic for me when I'm playing with Gigo material, always have a circle with different texts and everything makes sense in my head. The same with interpolation. Whoever is listening to this post podcast, I believe you definitely need to learn. They are by far the best thing to learn when it comes to animations because one, it's instead of doing an animated value or a shared value for each individual style attribute, you can have a single value and based on which you can interpolate and have a different output and it is going to save you

Robin Heinze:

In terms of function. It's just like,

Jamon Holmgren:

Yeah, and it kind just can based on the parameters that you're given, tell you exactly where you are.

Robin Heinze:

Literally map

Jamon Holmgren:

Position, yeah, the opacity, whatever. You're calculating that and you can kind of move back and forth along that line, I guess sort of graphing in algebra or whatever.

Catlin Miron:

Exactly. Yeah. This is what I wanted to actually, if you have watched my conference from ab js two years ago, this is exactly what I wanted to emphasize. Like this graph, you need to specify minimum two points for this function, and another two points is output, like how to remap basically the values, and this is just a graph is like, okay, so those are the input values and this is the output value, and in your head you just remap that as a line. It doesn't have to be a straight line. You can define multiple points

Jamon Holmgren:

For those who aren't as enthusiastic about math or maybe who hear algebra and kind of flinch. What I think is cool about animations is that you get that cool visual feedback. It's one of the coolest parts of coding because normally we're just boxes on the screen, but this time we're making a move and it starts feeling like something tactile, something real. It's always pretty cool. Alright, well we're running out of time here. So much fun to catch up with your Catalina. I know there's so much more that you do than animations. We didn't even get to it. We didn't even get to it this time. We'll have to have you back on. Of course. Everybody go check out animate React native. Where can people find you online, Kathleen, both your YouTube and elsewhere socials.

Catlin Miron:

I'm really active on X and Twitter. You can follow me on at miron kaline or on YouTube. Lately I'm posting a video day video a week and I plan on doing two live streams a week, so I'm trying to be quite active there as well. Otherwise, anime react native.com, hit me there and you have a bunch of emails that you can reach out to based on whatever your needs are

Jamon Holmgren:

And at the end of the day, if you really don't want to do the math, just hire company. He'll do it for

Catlin Miron:

You. Yeah, I can do that. I can do that. If anyone needs me, I'm more than happy to

Jamon Holmgren:

Help. Yep, that's awesome. Very cool. Well thanks so much for coming on. Really appreciate it Kathleen. Nice to catch up. As I said, of course you can find us on Twitter at React native rdi. You can find me at jamon, holmgren and Robin, something new for you.

Robin Heinze:

I feel like we talked about this last time it happened live, but

Jamon Holmgren:

Well hey, not everybody

Robin Heinze:

Listened to last time, so if didn't listen last time the underscore is gone so you can find me at Robin Heinz on Twitter X

Jamon Holmgren:

With an E. The E

Robin Heinze:

Is not gone, the E is not gone.

Jamon Holmgren:

Keep that. Yeah, if you put the underscore, you'll find a different account, which is

Robin Heinze:

Still it owned by Robin it back mine. I made Jamon made sure that I secured my old account as

Jamon Holmgren:

Well. She's like, I switched it over. I'm like, go register the other one right now.

Robin Heinze:

You did. You were very serious.

Jamon Holmgren:

Socials are. I was very serious. You don't, don't

Robin Heinze:

Mess around that. Don't that. Just

Jamon Holmgren:

Hang out there. First person to hit that and it doesn't exist. They're going to register it and put something you don't want.

Robin Heinze:

It was very good advice and I secured it, so it's all good.

Jamon Holmgren:

Yeah. Awesome. That's it for this episode. Ram, do you have a mom joke to take us

Robin Heinze:

Out? I do. I have a really funny one. I thought it was really funny. I don't know if anyone else will, but

Jamon Holmgren:

We'll see. We'll see. I dunno, based on track record,

Robin Heinze:

I always find them funnier than everyone else, but alright. I took a job as the head of old McDonald's farm. I'm the C-I-E-I-O.

Jamon Holmgren:

Oh, geez. Oh man. Why do we do this?

Robin Heinze:

Because it's fun. We're having fun.

Jamon Holmgren:

Okay. See y'all next time. Bye bye.

Jed Bartausky:

As always, thanks to our editor Todd Werth, our assistant editor, Jed Bartausky, our marketing and episode release coordinator, Justin Huskey and our guest coordinator, Mazen Chami. Our producers and hosts are Jamon Holmgren, Robin Hines and Mazen Chami. Thanks to our sponsor, infinite Red, check us out at Infinite Red slash Radio. A special thanks to all of you listening today. Make sure to subscribe to React Native Radio on all the major podcasting platforms.