# sections

id: interviews/lochie-axon/lochie-06-01
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (06:01)
url_path: /lessons/interviews/lochie-axon/#lochie-06-01
markdown_path: /md/sections/interviews/lochie-axon/lochie-06-01.md
excerpt:
Probably like three, four years ago it shut down. But yeah, it’s basically, so I was posting a lot on Twitter and I would just join these apps.

body:
Probably like three, four years ago it shut down. But yeah, it’s basically, so I was posting a lot on Twitter and I would just join these apps.

That people were making, and just trying to be social. I was just enjoying what people were making, and I just made a few friends. In particular I made friends with Pugson.

And he saw my work and just thought it was really well done. And then he started shouting me out a lot more, which then got me a little bit more momentum.

Until Benji picked me up at family, and we started working together. We did a couple of small things together for Honk. And then, yeah, we started working together full time. And I joined his team. Very, very talented team. And then we started making Family. They, they focused on the iOS app. And I focused on the web experience.

The Connect Kit, the Family website, and the Family Docs. And a few other things that we worked on that, cause we had to, we had to start a brand from scratch. So we worked on a bunch of different things and we, we settled on the family stuff.


id: interviews/lochie-axon/emil-07-09
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (07:09)
url_path: /lessons/interviews/lochie-axon/#emil-07-09
markdown_path: /md/sections/interviews/lochie-axon/emil-07-09.md
excerpt:
How cause I guess you spent a lot of time on at least with family on something that is not the actual product, like the wallet, a site that you made for the web.

body:
How cause I guess you spent a lot of time on at least with family on something that is not the actual product, like the wallet, a site that you made for the web.

Well, like how important do you think the sort of packaging, I call it packaging, like the web, the website and everything around the app, how important is that? Do you think?


id: interviews/lochie-axon/lochie-07-32
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (07:32)
url_path: /lessons/interviews/lochie-axon/#lochie-07-32
markdown_path: /md/sections/interviews/lochie-axon/lochie-07-32.md
excerpt:
I think it’s really important to have a well rounded-sm website because that’s the first thing that people see when they come to try to find your product.

body:
I think it’s really important to have a well rounded-sm website because that’s the first thing that people see when they come to try to find your product.

It’s like, they’re going to curve to see. This app that people are talking about. And if they load up a page that is a bit lackluster, they might just kind of wave it off as something that’s still a work in progress or something that’s just not quite going to hit that bar of quality. When they hit a website that is a really interesting and high bar quality, they’re going to think that the app is just as better.

And I, when I made the website, I just wanted to make sure that it wasn’t extremely better than the app. I wanted to make sure that it was. a little bit lower in extravagancy than the application because I didn’t want anyone to go and download the app and find out that it’s got less going on. So I wanted to set their expectations high.

So then when they download the app and actually use it, they’re even more excited because it’s even higher than they thought it was going to be. So yeah, cause you don’t want to set the expectations really high and then under deliver on the other side. So, but I think having the website is really important.

It’s just, it’s marketing at the end of the day, but you just got to make sure that you’re marketing well.


id: interviews/lochie-axon/emil-08-51
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (08:51)
url_path: /lessons/interviews/lochie-axon/#emil-08-51
markdown_path: /md/sections/interviews/lochie-axon/emil-08-51.md
excerpt:
That’s interesting. I didn’t think about it this way to like set expectations high, but not too high. You know?

body:
That’s interesting. I didn’t think about it this way to like set expectations high, but not too high. You know?


id: interviews/lochie-axon/lochie-08-58
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (08:58)
url_path: /lessons/interviews/lochie-axon/#lochie-08-58
markdown_path: /md/sections/interviews/lochie-axon/lochie-08-58.md
excerpt:
It’s under promise over deliver, is how I always put it. There’s a, there’s a good balance, and I think balance is very important across everything, especially like with animation, like you don’t want to go too crazy with it.

body:
It’s under promise over deliver, is how I always put it. There’s a, there’s a good balance, and I think balance is very important across everything, especially like with animation, like you don’t want to go too crazy with it.

You want to kind of keep it subtle but keep it entertaining. It’s a really, it’s, it’s a line that needs to be carefully followed because it’s very easy to go too far in each direction.


id: interviews/lochie-axon/emil-09-27
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (09:27)
url_path: /lessons/interviews/lochie-axon/#emil-09-27
markdown_path: /md/sections/interviews/lochie-axon/emil-09-27.md
excerpt:
So how do you follow the line? Cause like family and eighth size that you worked a bit on as well, like they have quite a bit amount of motion, like more than the usual side, I would say, but they are not crossing the line, at least not for me.

body:
So how do you follow the line? Cause like family and eighth size that you worked a bit on as well, like they have quite a bit amount of motion, like more than the usual side, I would say, but they are not crossing the line, at least not for me.

So, so how do you. You know, find that balance when you’re working on a site like family, let’s say.


id: interviews/lochie-axon/lochie-09-52
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (09:52)
url_path: /lessons/interviews/lochie-axon/#lochie-09-52
markdown_path: /md/sections/interviews/lochie-axon/lochie-09-52.md
excerpt:
With most of the websites I work on My main focus is to drive the user’s attention and how they read the website. And if there there’s too much motion, you kind of take away their focus and they keep moving around. They don’t actually look at the content and you want to. So like if you have scroll animation when text comes in, they go to look where it’s animating in from, and if you animate too far away.

body:
With most of the websites I work on My main focus is to drive the user’s attention and how they read the website. And if there there’s too much motion, you kind of take away their focus and they keep moving around. They don’t actually look at the content and you want to. So like if you have scroll animation when text comes in, they go to look where it’s animating in from, and if you animate too far away.

From where it’s going to sit, you’ve driven their eye too far away. And then they can get lost. Or it can just feel a little bit like a little bit disjointed. It’s probably a good word for it. So I like to, it’s called staging is the best way to put it. If you look into the 12 principles of animation, there’s a thing called staging.

And I think about that every time I make something. So for instance, the family website, the homepage, there’s there’s a bunch of illustrations that animate out from the center. But then I wanted the attention to stay in the central. So I actually animate them on a bit of a M curve, bit of a shape of an M.

So it starts from the middle, comes out and goes around. And then the text at the bottom appears after that. So it kind of draws the eye back up. So, it’s kind of like a love heart shape, if you can visualize that. But the whole point was to kind of like bring people back to the center where the content is rather than drawing their eye away from the content.

So there’s like a fine line to do that without doing it too extreme. It’s hard, it’s a very hard balance to find. But a lot of the time I just spend reiterating constantly until it feels right. And a lot of the time when it feels right is if I stop noticing what is animating, once it starts feeling like I can scroll and just feel like it’s a sense of flow and there is nothing pulling me too far or too, too up or too far down or anything that feels jarring.

And it might just be something that takes a while to figure out.

But, a lot of the time it’s just, As long as it doesn’t feel like it’s in the way, that’s usually the best animation that I like to pick. I want to be, I don’t want it to be in the way of the user, and I don’t want it to be in the way of the content.

I want to be a flourish to the content, and draw people back to what they’re actually supposed to look at. The, the issue I see with some websites is that they animate too much and they draw the attention away from the content and there’s some websites I go on and then I scroll down and I watch all the animations and it’s really cool and I get to the bottom of the page and I don’t know what the product is about and then that’s when I think that the animation has, it’s, it’s very, it can be high quality, it can be very interesting animation, but if it does not compliment the content, then it’s not doing a good job.


id: interviews/lochie-axon/emil-12-57
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (12:57)
url_path: /lessons/interviews/lochie-axon/#emil-12-57
markdown_path: /md/sections/interviews/lochie-axon/emil-12-57.md
excerpt:
Do you like bring up or, or reference the twelve principles of animations a lot? Or is that the, the one you use a lot and the others not really? Or do you like, is this like some sort of holy grail for you or something that you reference a lot? How do you look at it?

body:
Do you like bring up or, or reference the twelve principles of animations a lot? Or is that the, the one you use a lot and the others not really? Or do you like, is this like some sort of holy grail for you or something that you reference a lot? How do you look at it?


id: interviews/lochie-axon/lochie-13-19
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (13:19)
excerpt: I think the 12 principles of animation, I feel like are a bit more of a guideline.
url_path: /lessons/interviews/lochie-axon/#lochie-13-19
markdown_path: /md/sections/interviews/lochie-axon/lochie-13-19.md
body:
I think the 12 principles of animation, I feel like are a bit more of a guideline.

You don’t have to use all of them. But whenever you animate something, you are using one of them. So as simple as one of the, one of the rules is easing. Just like pacing for an animation, if it should slow down or if it should speed up is one of the principles. Another one is anticipation, whether it should start slow and then suddenly appear somewhere else.

So, and I think that they’re all important. They’re all pretty much necessary for animation to exist. So but in terms of referencing, it’s more that. I feel like it’s good to be aware of the 12 principles of animation, because then you have a bigger toolkit to reference. So I’ve been doing it for quite a long time that it’s kind of second nature to reference these, but I don’t feel like I’m constantly going back and looking at them.

It’s, it’s more just like being aware that they exist is what helps you. Being aware that the 12 principles exist helps you plan what you want to animate and in what sort of characteristic you want things to be animated. If you want something to be a bit more playful, you can introduce squash and stretch.

If you want something to be a bit more snappier, that’s when you can introduce more anticipation or quicker easing. And staging, I think is probably the most important one that a lot of people tend to forget, which is just how things are presented and what order things animate in and how you orchestrate your animations.


id: interviews/lochie-axon/emil-15-07
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (15:07)
url_path: /lessons/interviews/lochie-axon/#emil-15-07
markdown_path: /md/sections/interviews/lochie-axon/emil-15-07.md
excerpt:
Is there like any, like other resource that you, I, for example, use I have a set of easings, for example, that’s one resource I, I use from, from Benjamin, the cock, he has I guess, just on, on, on, on GitHub. And I know you made the easings that that site, for example, but is there something else that you found useful in the past or ref go back to sometimes when it comes to animations, like some rules, I don’t know.

body:
Is there like any, like other resource that you, I, for example, use I have a set of easings, for example, that’s one resource I, I use from, from Benjamin, the cock, he has I guess, just on, on, on, on GitHub. And I know you made the easings that that site, for example, but is there something else that you found useful in the past or ref go back to sometimes when it comes to animations, like some rules, I don’t know.


id: interviews/lochie-axon/lochie-15-38
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (15:38)
url_path: /lessons/interviews/lochie-axon/#lochie-15-38
markdown_path: /md/sections/interviews/lochie-axon/lochie-15-38.md
excerpt:
I found that I have a set of animation springs that I constantly go back to and just linear animate easings as well. And those are the ones I put on easing dev. So the ones that I use a lot and I constantly. Need access to I just wanted a place to be able to go back and get them without having to go to a different project And copy and paste so I found just making a little resource was the easiest thing and then I’m like, well I don’t think that this there’s any special spring that makes your animation good because Every spring works for different animations so I’m like why not share these publicly and just let people have access to them because I still think that what’s important is how you use them rather than just having access to them because at the end of the day they’re just a couple of numbers and like if you have a really tight spring that works better on things like a hover but if you put that tight spring on something’s animating from zero scale to one scale, it’s going to feel a little bit too sharp and the same vice versa.

body:
I found that I have a set of animation springs that I constantly go back to and just linear animate easings as well. And those are the ones I put on easing dev. So the ones that I use a lot and I constantly. Need access to I just wanted a place to be able to go back and get them without having to go to a different project And copy and paste so I found just making a little resource was the easiest thing and then I’m like, well I don’t think that this there’s any special spring that makes your animation good because Every spring works for different animations so I’m like why not share these publicly and just let people have access to them because I still think that what’s important is how you use them rather than just having access to them because at the end of the day they’re just a couple of numbers and like if you have a really tight spring that works better on things like a hover but if you put that tight spring on something’s animating from zero scale to one scale, it’s going to feel a little bit too sharp and the same vice versa.

If you have a spring, that’s like a bit more wobbly. And you put that on a hover effect, it doesn’t work at all because way too much motion going on on a interaction. So I have a few springs and easings that I go back to pretty often. A lot of them have like a bit of a boiler plate. Template that I use for most projects and a lot of them kind of come pre packaged in that and I just reference them usually in a project I kind of work on I usually have the application Wrapped in a motion config tag where you can set the default easing across the entire app And that’s where I kind of, after I’ve started doing some animations, I kind of go back there and tweak the values a little bit until I feel like all the basic stuff feels covered.

And then I work off of that and tweak the values for all the individual animations that I want to fine tune.


id: interviews/lochie-axon/emil-17-49
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (17:49)
url_path: /lessons/interviews/lochie-axon/#emil-17-49
markdown_path: /md/sections/interviews/lochie-axon/emil-17-49.md
excerpt:
So you’re like Use one spring or easing value in motion config and then make sure that most of the animations work well with that easing and then fine tune where needed.

body:
So you’re like Use one spring or easing value in motion config and then make sure that most of the animations work well with that easing and then fine tune where needed.


id: interviews/lochie-axon/lochie-18-00
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (18:00)
excerpt: Yeah, that’s a good way to put it.
url_path: /lessons/interviews/lochie-axon/#lochie-18-00
markdown_path: /md/sections/interviews/lochie-axon/lochie-18-00.md
body:
Yeah, that’s a good way to put it.

It’s, yeah, have one that you like to use. One that’s A good one is something that’s a bit more subtle rather than something that’s too extravagant. And then you can work your way up from there rather than having something that’s too extravagant and having to work everything back down. Because most things you want to be subtle and quick.

But then there’s usually the bits and pieces around different sections that you want to go a little bit more, a bit more louder with. And that’s when you can go to say a spring generator or easing dev for instance and tinker with values until you find the perfect thing.


id: interviews/lochie-axon/emil-18-41
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (18:41)
url_path: /lessons/interviews/lochie-axon/#emil-18-41
markdown_path: /md/sections/interviews/lochie-axon/emil-18-41.md
excerpt:
Speaking of like finding the perfect thing when you work on a side, like family, like, and that’s what I’m kind of curious about as well.

body:
Speaking of like finding the perfect thing when you work on a side, like family, like, and that’s what I’m kind of curious about as well.

Is, do you have a, like, is there are other people like. Helping you or would you be able to make a site or maybe you’ve done it like family on completely on your own or do you always like rely on someone giving you feedback on how it looks before it actually ships when it comes to motion


id: interviews/lochie-axon/lochie-19-14
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (19:14)
url_path: /lessons/interviews/lochie-axon/#lochie-19-14
markdown_path: /md/sections/interviews/lochie-axon/lochie-19-14.md
excerpt:
Interesting So maybe we’ll do some background on how we built the family website. So with, with the family website, it was mainly between myself. We have our main designer, Alex and Benji, who was the CEO of CCTO. I don’t know if he was CEO at the point, but the process when we made the family. co website was we had, Benji and Alex, a designer at Hella Fee at the time, or Evara they made some static designs in Figma and I was also involved just giving them ideas and different suggestions, and I made a couple of different sections of the homepage.

body:
Interesting So maybe we’ll do some background on how we built the family website. So with, with the family website, it was mainly between myself. We have our main designer, Alex and Benji, who was the CEO of CCTO. I don’t know if he was CEO at the point, but the process when we made the family. co website was we had, Benji and Alex, a designer at Hella Fee at the time, or Evara they made some static designs in Figma and I was also involved just giving them ideas and different suggestions, and I made a couple of different sections of the homepage.

We also had an illustrator come in and do different illustrations for the, all the characters and whatnot. And then once that was done, and we got signed off that that’s what we wanted, I then went and recreated it one to one. In, in, in react and then I just went ahead and animated things as I was building them and just the way that I thought they should be done and then I would get a little bit of feedback.

But for the most part, it was probably about 90 percent there. It was just sometimes it was just simple things like make that a little bit quicker or it looks a little bit different in the app, just like to try to make it a bit more one to one. But there are some animations that I made it too close to what it looks like in the app.

Yeah. That we actually wanted to style it a bit more for marketing purposes, rather than having it true to what’s in the app. And those were the notes that I wasn’t really ready for. Cause I was just like, I wanted it to be a bit more exact. And then, yeah, I got it. I got a great note of don’t try to copy, try to make it.

More of a flourish. So I went in and just like slowed down some things, made the movement a little bit more a bit more larger, but also not as sudden because the app is very quick with stuff because it, it can be because people just care about the end result rather than the process. And we wanted to showcase the process a bit more.

So I slowed things down, animated things a little bit more. Yeah, just a bit more bubbly, like a bit more a bit more overshoot in some stuff. And yeah, just tweaked some values just to kind of hone it in a bit more to make it a little bit more exciting.


id: interviews/lochie-axon/emil-21-46
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (21:46)
url_path: /lessons/interviews/lochie-axon/#emil-21-46
markdown_path: /md/sections/interviews/lochie-axon/emil-21-46.md
excerpt:
And for something like more specific, like the hero, where you have the illustrations on the left and right, the dex in the middle, like from what I’ve seen, as far as I remember the icons, there is just one big SVG file.

body:
And for something like more specific, like the hero, where you have the illustrations on the left and right, the dex in the middle, like from what I’ve seen, as far as I remember the icons, there is just one big SVG file.

Is that right?


id: interviews/lochie-axon/emil-22-03
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (22:03)
url_path: /lessons/interviews/lochie-axon/#emil-22-03
markdown_path: /md/sections/interviews/lochie-axon/emil-22-03.md
excerpt:
Yeah. And, and I was wondering how, how does that look like in code? Cause they’re all animated. It’s each. Icon within the SVG like a separate react component that has its own like animations or yeah

body:
Yeah. And, and I was wondering how, how does that look like in code? Cause they’re all animated. It’s each. Icon within the SVG like a separate react component that has its own like animations or yeah


id: interviews/lochie-axon/lochie-22-16
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (22:16)
excerpt: Yeah, so I have each each illustration each icon in that header.
url_path: /lessons/interviews/lochie-axon/#lochie-22-16
markdown_path: /md/sections/interviews/lochie-axon/lochie-22-16.md
body:
Yeah, so I have each each illustration each icon in that header.

I wrapped into another component so They all can time with a motion variant So they all have that offset animation and they all have this floating animation as well that are all offset to each other So they all have this kind of like constant motion and then Inside those, I also wrap the wrap the illustrations into their own component.

So then I can isolate that and animate them without getting too confused with between all the different SVG paths and groups. And then I just animate the groups from the top level in there. And I have all that wrapped in its own motion config. So then they all share similar values for their easing.


id: interviews/lochie-axon/emil-23-05
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (23:05)
url_path: /lessons/interviews/lochie-axon/#emil-23-05
markdown_path: /md/sections/interviews/lochie-axon/emil-23-05.md
excerpt:
And do you just use like motion dot path or whatever, or do you use like the animate function or how do you animate them in general?

body:
And do you just use like motion dot path or whatever, or do you use like the animate function or how do you animate them in general?


id: interviews/lochie-axon/lochie-23-13
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (23:13)
url_path: /lessons/interviews/lochie-axon/#lochie-23-13
markdown_path: /md/sections/interviews/lochie-axon/lochie-23-13.md
excerpt:
90 percent of the time, I would probably just do a motion dot path or motion div. Just because I feel like for readability, it’s a bit more easier for people just to reference if they need to come in and see what’s happening, or if, say, another developer in the future needs to come in and look at it, or if I haven’t looked at it in months and I need to remember what I’ve done, it’s better most of the time to have it directly associated to what’s animated.

body:
90 percent of the time, I would probably just do a motion dot path or motion div. Just because I feel like for readability, it’s a bit more easier for people just to reference if they need to come in and see what’s happening, or if, say, another developer in the future needs to come in and look at it, or if I haven’t looked at it in months and I need to remember what I’ve done, it’s better most of the time to have it directly associated to what’s animated.

But the use animate function, I think is super useful for different sorts of animations. I just prefer doing things on the motion div level. The organization purposes sometimes I would do use animate because You can organize like if you’re animating between different paths, it’s sometimes a bit easier because then you have a bit of a messy Markup, but I think it’s that animation in particular.

It was pretty much all motion divs or motion paths motion groups Really? Everything I do is motion dodgy, right? I tried it I try not to animate the path or the shape too often. I try to wrap everything in a group So I’m never really directly modifying a illustrated component or an illustrator element.

Why? It feels safer and it feels like I’m not potentially destructing something. And it feels like it works a bit more in my head of kind of grouping something than animating that group. Rather than animating different parts inside a group. It also makes origins a bit easier to move as well, because sometimes when you have a path, the origin, the bounding box is a bit, bit messy.

So it’s easier to group it and then move the origin. I, I also have a I also have a global CSS I have a global CSS class sitting around. That’s just called like debug SVG. And if I put that class on an SVG, it then doesn’t outline and changes all the colors into a bit more of a debug mode. So then I can just add that on either an SVG or onto a group, and then it will highlight that group for me.

And then I can see that this is the group that I’m currently animating. And it kind of makes things a little bit easier to, to look at in your code when you, or when you work in multiple things, you can just search debug. In that file, and then just be like, cool, that’s the current thing that’s highlighted.

Now I can just work from there.


id: interviews/lochie-axon/emil-25-44
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (25:44)
url_path: /lessons/interviews/lochie-axon/#emil-25-44
markdown_path: /md/sections/interviews/lochie-axon/emil-25-44.md
excerpt:
Interesting. While we are like on SVG animations, like, you guys have also animated a lot of, like, SVGs in the docs. Like, the icons in the sidebar and stuff. And like, those are pretty small things. I feel like, or not a lot of docs have those icons, like animated, like, I guess, I think I know the answer, but I’m curious, like why?

body:
Interesting. While we are like on SVG animations, like, you guys have also animated a lot of, like, SVGs in the docs. Like, the icons in the sidebar and stuff. And like, those are pretty small things. I feel like, or not a lot of docs have those icons, like animated, like, I guess, I think I know the answer, but I’m curious, like why?


id: interviews/lochie-axon/lochie-26-13
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (26:13)
url_path: /lessons/interviews/lochie-axon/#lochie-26-13
markdown_path: /md/sections/interviews/lochie-axon/lochie-26-13.md
excerpt:
Why is a good question. A lot of it has to do with. Not many other people are doing it. So first off we asked why aren’t other people doing it? And usually the answer is because they do too much rather than kind of keeping it subtle or keeping it quick So we animated a couple of them and we thought it was looking good.

body:
Why is a good question. A lot of it has to do with. Not many other people are doing it. So first off we asked why aren’t other people doing it? And usually the answer is because they do too much rather than kind of keeping it subtle or keeping it quick So we animated a couple of them and we thought it was looking good.

And then we decided to do a bit more, more of them, just like some top level ones. And then we were like, yeah, this is working. So then we went ahead and did all of them. And we thought it was just like a really nice way to keep people entertained while going through something that can usually be fairly boring, like going through some docs.

Usually documentation is a bit more developer, well, it is developer focused. So usually documentation is pretty sterile, because it’s all about just giving information and just letting people figure out what to do with it. So we thought it would be a bit nicer just to keep some a little bit of entertainment in there So when people are navigating around this at that little bit of delight just to keep them happy and just keep people just entertained But nothing that’s in the way because you can use the docks without even paying attention to those animating icons at all. So if they were too large or too in the way people would start getting a bit annoyed.


id: interviews/lochie-axon/emil-27-33
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (27:33)
url_path: /lessons/interviews/lochie-axon/#emil-27-33
markdown_path: /md/sections/interviews/lochie-axon/emil-27-33.md
excerpt:
Yeah I think so too docs are, you know, there to give you information and stuff, and animations could get annoyed, but those small SVG animations don’t really get in the way.

body:
Yeah I think so too docs are, you know, there to give you information and stuff, and animations could get annoyed, but those small SVG animations don’t really get in the way.


id: interviews/lochie-axon/lochie-27-45
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (27:45)
url_path: /lessons/interviews/lochie-axon/#lochie-27-45
markdown_path: /md/sections/interviews/lochie-axon/lochie-27-45.md
excerpt:
That’s why like a lot of our docs don’t have any page transitions, because we want to be snappy, and docs aren’t marketing, they’re functionality.

body:
That’s why like a lot of our docs don’t have any page transitions, because we want to be snappy, and docs aren’t marketing, they’re functionality.

So you don’t really want to get in the way of anyone. You want to just kind of give them what they want as soon as they can get it. But yeah, if you can have an opportunity to do something entertaining or something nice without getting in the way for those sort of projects, take the opportunity when you can.


id: interviews/lochie-axon/emil-28-14
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (28:14)
url_path: /lessons/interviews/lochie-axon/#emil-28-14
markdown_path: /md/sections/interviews/lochie-axon/emil-28-14.md
excerpt:
Yeah. Docs are not marketing, but I’ve seen a lot of tweets about those animated icons. So they can, I guess, serve as marketing for your product a bit, you know?

body:
Yeah. Docs are not marketing, but I’ve seen a lot of tweets about those animated icons. So they can, I guess, serve as marketing for your product a bit, you know?


id: interviews/lochie-axon/lochie-28-28
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (28:28)
url_path: /lessons/interviews/lochie-axon/#lochie-28-28
markdown_path: /md/sections/interviews/lochie-axon/lochie-28-28.md
excerpt:
There’s that too. Just like there’s secondhand marketing that comes out of some, some of this stuff where if you do really good work, other people like to share it.

body:
There’s that too. Just like there’s secondhand marketing that comes out of some, some of this stuff where if you do really good work, other people like to share it.

And, and usually, yeah, if you do something really good, people see it, they share it, they use it as reference. And then it kind of keeps the ball rolling. It’s like I haven’t shared a lot of the stuff that I’ve made, but I’ve seen a lot of other people share the stuff that I’ve made. And I think that’s, to me, that’s actually, it’s quite nice to see other people celebrating something that I’ve made.

And I don’t really mind if I’m not referenced in or like credited in anything. I just kind of like personally, I say it is cool. It’s interesting.


id: interviews/lochie-axon/lochie-29-18
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (29:18)
url_path: /lessons/interviews/lochie-axon/#lochie-29-18
markdown_path: /md/sections/interviews/lochie-axon/lochie-29-18.md
excerpt:
I should, yeah, I should, I, I definitely tell people that they should share more. But I should practice what I preach and I should also do more building in public. I have a lot of side projects that I work on that kind of fizzle out because I never find like a backend developer to help me out.

body:
I should, yeah, I should, I, I definitely tell people that they should share more. But I should practice what I preach and I should also do more building in public. I have a lot of side projects that I work on that kind of fizzle out because I never find like a backend developer to help me out.

But I know how to do backend development. I just don’t enjoy it as much. So it’s like, I need to be more okay with. Doing the back end development as well. So I can just get things launched and ship more things.


id: interviews/lochie-axon/emil-29-56
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (29:56)
url_path: /lessons/interviews/lochie-axon/#emil-29-56
markdown_path: /md/sections/interviews/lochie-axon/emil-29-56.md
excerpt:
Well, while you work on those animations, like for family or whatever cause the design aesthetic, like you said, like, how do you, where, where does the inspiration for motion come from? Like, how do you figure out how to move certain things for family

body:
Well, while you work on those animations, like for family or whatever cause the design aesthetic, like you said, like, how do you, where, where does the inspiration for motion come from? Like, how do you figure out how to move certain things for family


id: interviews/lochie-axon/emil-30-15
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (30:15)
url_path: /lessons/interviews/lochie-axon/#emil-30-15
markdown_path: /md/sections/interviews/lochie-axon/emil-30-15.md
excerpt:
Just, just in general, like how do you think about when you see a static thing, like how does that, you know, form in your head? Like, it’s kind of a hard question, I guess.

body:
Just, just in general, like how do you think about when you see a static thing, like how does that, you know, form in your head? Like, it’s kind of a hard question, I guess.


id: interviews/lochie-axon/lochie-30-27
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (30:27)
url_path: /lessons/interviews/lochie-axon/#lochie-30-27
markdown_path: /md/sections/interviews/lochie-axon/lochie-30-27.md
excerpt:
Yeah, it’s, it’s very. instinctual to me, I think, cause I’ve just been doing it for so long that I have so many different reference materials in my head of just the things that I’ve looked at. Like, I’ve spent a lot of time just looking at things and like, whenever I see like any, like if I look at an advertisement, like a billboard, the first thing that goes through my head is how did they put that together in whether Photoshop or whatever, and like.

body:
Yeah, it’s, it’s very. instinctual to me, I think, cause I’ve just been doing it for so long that I have so many different reference materials in my head of just the things that I’ve looked at. Like, I’ve spent a lot of time just looking at things and like, whenever I see like any, like if I look at an advertisement, like a billboard, the first thing that goes through my head is how did they put that together in whether Photoshop or whatever, and like.

And then I also think like, how did they get that photo of that car in that location? Or like if I watched an animated movie, I’m usually trying to figure out how they did the composition and how they put things together and why they animated something this way and why they did something that way. Same thing with film.

Try to think about. Why did they choose that shot over that shot? Why they choose to put two people in the frame instead of one person in the frame? It’s because a lot of that can it’s just it’s a type of design language And I feel like when you do a lot of different things and when you experiment with a lot of different ideas and you look and you absorb the things that you are consuming, you kind of start understanding it a bit more and getting these like instinctual thoughts of like how things should go together.

So like when I saw the family designs and they’re in front of me, the first thing I thought was they’re, they’re quite playful, but they’re also Not like they’re serious, but they don’t take themselves too seriously. That’s how I saw it. So we can do animations that have a bit more balance and a bit more momentum, a bit more squash and stretch, and it can be fast, can be a bit slow.

It can do a lot of things. So my initial thing was I animated the I’m just trying to think of what I did animate first. I think I animated the, hang on, I’m just going to go to the family website. Try and remember what I animated first. It was before we had the characters. Oh, okay. The first thing I animated on the family website was the backup now animation.

And originally I had it when I first made it, I had it really bouncy, not super bouncy, but just enough to have a, like a bit of overshoot. And then I looked at it, I just spent some time looking at it. I’m just like, it doesn’t work well with the text there. And it also doesn’t fit the vibe of something that’s supposed to be snappy and supposed to be quick.

So, so I’m like, okay, I’ll just get rid of the the bounce and just have it just ease out. And I felt that that was too static. It just felt too, too basic and not snappy enough. So I really honed in I just use a, an easing function rather than a spring for it, but I just honed in the values until it was just like the tiniest amount of overshoot.

I think the last value is like 1. 005 or something. It’s like really, really. enough but it’s enough to have like two pixels or one or two pixels of overshoot just enough to have it a little bit bounce because it moves so fast. So when I, so usually I would experiment with a few different variations of what goes through my head of I see a design how would I animate it let’s just go ahead and start messing around with ideas and as I’m animating something I’m usually tweaking values as I’m moving elements around being like that’s too fast that’s too slow or that’s moving too much overshoot not enough spring not enough easing So it’s a constant, like, it feels kind of like I’m cooking and like, I’m constantly having to change the, like, add a bit more salt, add a little bit less of this, add a bit more pepper, like just constantly moving some like stuff around until it starts feeling like how I want it to feel rather than following a strict recipe.


id: interviews/lochie-axon/emil-34-38
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (34:38)
url_path: /lessons/interviews/lochie-axon/#emil-34-38
markdown_path: /md/sections/interviews/lochie-axon/emil-34-38.md
excerpt:
Because I have to go away from the screen or at least from that animation to like see the flaws again after a bit of time. Do you like code an animation like one go or do you like come back to it later and see something new that’s like not great?

body:
Because I have to go away from the screen or at least from that animation to like see the flaws again after a bit of time. Do you like code an animation like one go or do you like come back to it later and see something new that’s like not great?


id: interviews/lochie-axon/lochie-35-01
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (35:01)
url_path: /lessons/interviews/lochie-axon/#lochie-35-01
markdown_path: /md/sections/interviews/lochie-axon/lochie-35-01.md
excerpt:
I would say over the course of a project I probably revisit an animation once or twice. But usually I would go in, animate something, I wouldn’t stop until I’m happy with it, and then once I’m happy with it, I don’t try to spend more than a day animating something I usually try to get something done in an hour or two, and then once I’m happy with it, I kind of go, okay, cool, that’s done, I can move on and keep doing other things, I would rather Keep moving.

body:
I would say over the course of a project I probably revisit an animation once or twice. But usually I would go in, animate something, I wouldn’t stop until I’m happy with it, and then once I’m happy with it, I don’t try to spend more than a day animating something I usually try to get something done in an hour or two, and then once I’m happy with it, I kind of go, okay, cool, that’s done, I can move on and keep doing other things, I would rather Keep moving.

And then as I’m working on a project, cause you’re always moving around the project, trying to like look at things. And if something catches my eye, that’s not quite right, I’ll go back and change it and I’ll tweak it. And then it’ll be like, that doesn’t look quite right. Or it doesn’t match this other thing I’ve animated now that I’ve kept the project moving.

So then I’ll go back and match values or tweak. Things constantly. So from the first time I animate something to when something is released, I probably iterated on it 50 times, but they’re all little tweaks that I just go back and change the value, continue on, but I think it’s fairly rare for me to need to step away from something completely because I like to just keep moving and if I step away from something completely, I tend to think about it too much whilst If it’s just something that’s constantly, I’m constantly looking at, eventually I’ll find the flaws just by experiencing it.

And like for the, for instance, the family header animation with everything kind of blooming out, at some point I thought things were moving too fast. So I went and slowed everything down a little bit. And then I realized that some of the elements were coming in too quickly in the order they, they blew me out in.

So I just changed that specific elements delay a little bit more and just kind of like slow tweaks. And it was just the idea of just constant iteration on if I noticed something I change it and rather than do it once and think that it’s done or do it a few times. And if I do modify something, I usually just tell the team.

I changed something, but usually if it’s something so small, I don’t even worry about it. It’s just like, I noticed it. If I noticed it, it’s probably wrong. So,


id: interviews/lochie-axon/emil-37-27
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (37:27)
url_path: /lessons/interviews/lochie-axon/#emil-37-27
markdown_path: /md/sections/interviews/lochie-axon/emil-37-27.md
excerpt:
And this has been a very specific question, but, but I’m like, personally curious about it. Like. Everything comes in with a bit of a different delay in the family’s header.

body:
And this has been a very specific question, but, but I’m like, personally curious about it. Like. Everything comes in with a bit of a different delay in the family’s header.

Stuff is, is that, is every delay like hand may, or is it like incremented by the index of each like SVG or how, how, how do you handle those delays?


id: interviews/lochie-axon/lochie-37-48
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (37:48)
url_path: /lessons/interviews/lochie-axon/#lochie-37-48
markdown_path: /md/sections/interviews/lochie-axon/lochie-37-48.md
excerpt:
I have everything wrapped in a group. And I do a variant with a delay on it, so stagger children, and I have that on the left side and the right side, so you stagger children for that.

body:
I have everything wrapped in a group. And I do a variant with a delay on it, so stagger children, and I have that on the left side and the right side, so you stagger children for that.

And then I have to manually order things in the order that I want, but I have to move the SVG paths around, but because I have everything in individual components, I can just look and go, that’s that star. That’s animating. Just move that component, move it up a couple. So I have to sit and reorder the react.

Oh, I have to sit and reorder the elements within that group to get that order. But most part is just a stagger children. And then the ones that, there’s a few elements that animate in together. And I just take that out of that list and add a manual delay to it.

Or I group that again. Depending on how I want to do it.

There’s a bit different. So some, there’s a couple of stars that animate together that aren’t one group in the SVG file. So I just grouped them again and use the variant with a motion group and then let the variant animate them together. But the problem with when you do that is that the origin point is now centered to the three different elements.

And I want each one, each individual element to animate in. From their center point. So rather than like, does that make sense?


id: interviews/lochie-axon/lochie-39-12
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (39:12)
url_path: /lessons/interviews/lochie-axon/#lochie-39-12
markdown_path: /md/sections/interviews/lochie-axon/lochie-39-12.md
excerpt:
Yeah. So instead I took them out of that variant group and just added a delay on each one. Just so they all animated from the center because I don’t want them like it was easier to just group them all, but it didn’t work that way.

body:
Yeah. So instead I took them out of that variant group and just added a delay on each one. Just so they all animated from the center because I don’t want them like it was easier to just group them all, but it didn’t work that way.

So I added a delay manually. So some of them are manually orchestrated, but for the most part, it’s just a stag of children with some tweaks.


id: interviews/lochie-axon/emil-39-32
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (39:32)
url_path: /lessons/interviews/lochie-axon/#emil-39-32
markdown_path: /md/sections/interviews/lochie-axon/emil-39-32.md
excerpt:
Interesting. Yeah, I guess we we’ve been talking for a while, but I guess I have two two last questions So first first is like is is there any site or app or whatever?

body:
Interesting. Yeah, I guess we we’ve been talking for a while, but I guess I have two two last questions So first first is like is is there any site or app or whatever?

That is not like family related that you are really like impressed by it’s motion animations or yeah transitions


id: interviews/lochie-axon/lochie-39-53
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (39:53)
url_path: /lessons/interviews/lochie-axon/#lochie-39-53
markdown_path: /md/sections/interviews/lochie-axon/lochie-39-53.md
excerpt:
I’m really lucky to work at a place that I’m inspired by That’s like, I’m very, because I work on the web and they’re working on these apps, I get inspired by what, why I get inspired by what they’re working on.

body:
I’m really lucky to work at a place that I’m inspired by That’s like, I’m very, because I work on the web and they’re working on these apps, I get inspired by what, why I get inspired by what they’re working on.

And then it, that helps a lot because I work, I work with some very talented people and I’m very happy with, with my team. But when I started working here, they had already made the honk app and that’s, that was just a level beyond a lot of apps that existed at the time. And then when I came in, I knew that I had to hit that bar of quality.

So when I made the Honk website, I was just trying to get to that level. And I did have to upskill a lot because I wasn’t really familiar with like React at the time. So I was fairly new at it. I had to move from just traditional CSS animations to, I didn’t even know motion. I didn’t even know frame of motion at the time, so I like, that was a whole new thing for me.

It’s like, so I jumped in, learned that realized how good of a library it was and have started using that as standard. Although I still do CSS animations every now and then like I’m really inspired by one, the team I work with, which I think is great, but I’m always constantly looking at different design references and I’m bookmarking things constantly to look back at, because I find that when I start an animation, I try to do things my own way, but then sometimes.

I do need to look at references or I remember a reference that I’ve looked at and I just want to go check it out again. So it’s really good to have some sort of bookmarking reference like arena is really good for that as well. Just being able to just grab a link and just put it somewhere and think about it later.

And I’d also have a folder where I just screen record things. And just be like, that’s cool, I’ll just screen record it, save it, and then I might look at it later. I feel like the act of screen recording something kind of solidifies the, what it, like, kind of makes me remember it more, because it’s so rare that I’ll screen record something that I see.

So, All it takes is to screen record it, save it, and I don’t really have to look at it because I’ve already remembered what I screen recorded. It’s a really weird like, way that my brain works, but, but if I just save a link or bookmark something, I tend to forget that I bookmarked it. So, for some reason that it’s, that just makes you remember, like, I remember, like, if I take a photo with my phone, I’ll remember the photo I took, or with a Polaroid or whatever, so.

Sometimes it’s good to take a photo, save it, and you don’t even have to look at it, but it helps you remember that it exists because you actively did something rather than just press a bookmark link. So, yeah, but if you want like direct references of like things that I’m inspired by, I’m, I’m Inspired a lot by just other developers on Twitter, really.

Like other design engineers. And like, that’s why I like Twitter so much. Like every time I open Twitter, I usually get inspired by something. I usually look at something and go, that’s really cool. Or someone releases a website and I open it up and I’m like, Oh this is really cool, how do they do it? And then I just inspect Element and just look at the different, the code that’s there.

And just try to reverse engineer whatever they’ve done. To understand how they’ve done it and that’s that’s how I would say I learned everything I know is just by like looking at other people’s code by inspecting element because I’m self taught and Everything is just like if I didn’t have inspect element.

I probably wouldn’t know what I know today So just that one tool I think is the most useful tool you can have is just knowing how to look through other code It is getting more difficult now with frameworks like compressing everything and minifying everything But yeah, it’s sometimes really good just to go through, especially if it’s a CSS animation, it’s just all there, just sitting there.

So JavaScript animations are a little bit harder to deconstruct, but possible, but more difficult.


id: interviews/lochie-axon/emil-44-09
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (44:09)
url_path: /lessons/interviews/lochie-axon/#emil-44-09
markdown_path: /md/sections/interviews/lochie-axon/emil-44-09.md
excerpt:
When it comes to like CSS and JavaScript animations, you said you use CSS animation sometimes. When do you use CSS animations or how do you decide when to use what?

body:
When it comes to like CSS and JavaScript animations, you said you use CSS animation sometimes. When do you use CSS animations or how do you decide when to use what?


id: interviews/lochie-axon/lochie-44-22
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (44:22)
url_path: /lessons/interviews/lochie-axon/#lochie-44-22
markdown_path: /md/sections/interviews/lochie-axon/lochie-44-22.md
excerpt:
Usually it would be when I try to choose between JavaScript or CSS animations, usually it’s got to do with performance or it’s got to do with developer experience.

body:
Usually it would be when I try to choose between JavaScript or CSS animations, usually it’s got to do with performance or it’s got to do with developer experience.

So if I’m working collaborative with collaborative, sorry, if I’m working collaboratively with other people, I usually opt for JavaScript animations because it’s a bit more easier to read and less to kind of decipher. Because other people might need to come in and modify something, but with with CSS animations, sometimes they get complicated if you’re layering different animations and different different key frames and all these different sort of things.

But that’s specifically for. animations, like SVG animations, if, if you’re doing like a hover effect, I try to keep them to CSS only like transitions. So if it’s a transition, I try to stick it to CSS. If it’s an animation, I then try to figure out what’s best performance and what’s going to work best for that use case.

And if it’s going to work best for our team as well, because It can be more performant, and if it’s just, like, a tiny bit more performant, is that really a better payoff than someone coming in and being confused by what’s being set up. So if, because like frame of motion is really good, we’ll just motion now, but yeah, frame of motion I think is really good at just handling its own performance.

So like when you scroll out of view, it tends to not calculate it as much. So you don’t have to think about that sort of stuff. CSS does that too, but it’s cause it doesn’t paint it, but it’s more just don’t have to think about it. So that’s, what’s good with frame motion. You just don’t have to think about all the bit of performance behind stuff until you do things that are over the top.

But if you’re going that far, Then you should probably look into CSS animations because they are native. So you get a little bit better performance

So I use yeah, I use CSS purely for performance reasons or for interactions any sort of interactions I’ve tried keep it as CSS


id: interviews/lochie-axon/emil-46-35
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (46:35)
url_path: /lessons/interviews/lochie-axon/#emil-46-35
markdown_path: /md/sections/interviews/lochie-axon/emil-46-35.md
excerpt:
Right but if you had to like my guess is that you usually or use frame of motion or motion most of the time

body:
Right but if you had to like my guess is that you usually or use frame of motion or motion most of the time


id: interviews/lochie-axon/lochie-46-46
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (46:46)
excerpt: I would say 80 to 90 percent of the time, except for things like a button hover or anything.
url_path: /lessons/interviews/lochie-axon/#lochie-46-46
markdown_path: /md/sections/interviews/lochie-axon/lochie-46-46.md
body:
I would say 80 to 90 percent of the time, except for things like a button hover or anything.

So, any sort of graphical animation would be frame of motion. Any sort of like, if I had a dropdown, I would do it with CSS, because I feel like that’s a bit more just performs a bit better, but if I want an interruptible animation, I would use frame of motion because you can’t really interrupt a CSS animation.

You can interrupt a CSS transition, but it depends how you animate everything because animating everything with a transition can start getting messy.


id: interviews/lochie-axon/emil-47-20
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (47:20)
url_path: /lessons/interviews/lochie-axon/#emil-47-20
markdown_path: /md/sections/interviews/lochie-axon/emil-47-20.md
excerpt:
Yeah, yeah, I use CSS transitions for for, for my toast library because they were interruptible because I use CSS animations at the beginning, but then when you added to toast very quickly, like it would jump to, to the new position and stuff.

body:
Yeah, yeah, I use CSS transitions for for, for my toast library because they were interruptible because I use CSS animations at the beginning, but then when you added to toast very quickly, like it would jump to, to the new position and stuff.

So, but yeah, I agree that they can get messy. So I’m very thankful for frame of motion.


id: interviews/lochie-axon/lochie-47-41
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (47:41)
url_path: /lessons/interviews/lochie-axon/#lochie-47-41
markdown_path: /md/sections/interviews/lochie-axon/lochie-47-41.md
excerpt:
The cool thing now is that. CSS has spring animations, so you can actually do spring transitions as well. So that’s where it’s starting to get really interesting. Cause it’s an interruptible spring, but the spring is actually a linear animation because of the way CSS does it.

body:
The cool thing now is that. CSS has spring animations, so you can actually do spring transitions as well. So that’s where it’s starting to get really interesting. Cause it’s an interruptible spring, but the spring is actually a linear animation because of the way CSS does it.

So it’s a static spring that is interruptible is a really weird visual when you see it, but it can work for different techniques. So I’ve used it a few times and like, it’s very niche, but it’s a cool little tool to have.


id: interviews/lochie-axon/emil-48-13
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (48:13)
url_path: /lessons/interviews/lochie-axon/#emil-48-13
markdown_path: /md/sections/interviews/lochie-axon/emil-48-13.md
excerpt:
Yeah, but it’s my, my, my thing with like CSS Springs is that I don’t think like I would always if it had no like drawbacks, like I would prefer to use like frame emotions springs over CSS Springs.

body:
Yeah, but it’s my, my, my thing with like CSS Springs is that I don’t think like I would always if it had no like drawbacks, like I would prefer to use like frame emotions springs over CSS Springs.


id: interviews/lochie-axon/lochie-48-30
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (48:30)
url_path: /lessons/interviews/lochie-axon/#lochie-48-30
markdown_path: /md/sections/interviews/lochie-axon/lochie-48-30.md
excerpt:
Yeah, same. It’s, it’s all depending on like, I think it’s very rare that I’ll use a CSS spring, but I am finding them like, like I’m currently looking at the connect kit library that I built and the biggest dependency we have in that is frame of motion and I’m thinking I can remove that and lower the package size a lot by just introducing CSS animations like only And I know there’s like framer motion has like an M function for like lower, like a light version of motion.

body:
Yeah, same. It’s, it’s all depending on like, I think it’s very rare that I’ll use a CSS spring, but I am finding them like, like I’m currently looking at the connect kit library that I built and the biggest dependency we have in that is frame of motion and I’m thinking I can remove that and lower the package size a lot by just introducing CSS animations like only And I know there’s like framer motion has like an M function for like lower, like a light version of motion.

But it doesn’t reduce it as much as I was hoping it would reduce it. So, I’ve been considering removing Frame of Motion entirely in that project, just to replace it with all the CSS animations. But there is an animation in there that’s fully interruptible, and I do need to make sure I can make that interruptible as well, and it has springs.

So it’s like, now that CSS springs exist, I can make, I can redo that entire animation in CSS only. And that’s where I think it’s interesting when you’re looking at performance, and looking at bundle size and all this other sort of stuff. Like, that’s when it gets really interesting. But I would say for anything like marketing and stuff like that, just frame of motion is easier.

It’s easier for everyone as well.


id: interviews/lochie-axon/emil-49-44
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (49:44)
url_path: /lessons/interviews/lochie-axon/#emil-49-44
markdown_path: /md/sections/interviews/lochie-axon/emil-49-44.md
excerpt:
Yeah. Yeah. Yeah. All right. I guess last question to close it off. There are obviously many people listening that are trying to, I guess, get to like your level and. While you are not sharing that much, I know how much, you know, great work you’ve produced. Thank you.

body:
Yeah. Yeah. Yeah. All right. I guess last question to close it off. There are obviously many people listening that are trying to, I guess, get to like your level and. While you are not sharing that much, I know how much, you know, great work you’ve produced. Thank you.

And I’m wondering whether you have, you know, any sort of words of advice for, for people that are trying to get better at.


id: interviews/lochie-axon/lochie-50-15
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (50:15)
excerpt: Animating things.
url_path: /lessons/interviews/lochie-axon/#lochie-50-15
markdown_path: /md/sections/interviews/lochie-axon/lochie-50-15.md
body:
Animating things.

There’s a lot of different advice I could give. There’s, it’s like, if you’re still fresh, I feel like it’s good to just look at things and just try to understand how things move and kind of like commit a lot of things to memory of just like how fast things are going. And like, especially like in the real world.

Like how fast something rolls across a table, how fast something like falls off a table can really help you kind of like tangibly put motion together. Cause I think like some of the best motion works when it’s tied to a real value in real life. So basically physics, but yeah, so it’s like a lot of, if you go too far with animation, like too much spring, it can feel not grounded.

And that can be good, but that’s when you start getting into like, Looney Tunes sort of space. So, if you can find a way to look at the world and try to figure out how everything is grounded, and how everything moves, and then try to translate that into motion, like, on the web, or any sort of projects you’re making, it can kind of help translate things in a more, like, the viewer will see something that’s translatable rather than something that’s not existing in this world.

But that’s one piece of advice. Just like look around and just like pay attention and just like, just look at things and spend a little bit more time just looking at things that are moving and just understand it. A lot of things like another one is like watch film, watch TV. Watch animation and just like but don’t like don’t just sit back and consume it try to actually pay attention to how they made it And like why they chose certain things and how they framed a shot and why something moves a certain way Because a lot of the time they think about a lot of this stuff, especially in film and If they’re thinking about it and you can kind of break reverse engineer and break it down why they do it It can kind of help you come up with reasons and logic to do certain things.

There’s also a lot of YouTube channels that do a lot of that stuff. Some of my favorite ones are like Every Frame a Painting, and Nerdwriter is another one that I like to watch sometimes. And they explain like different things in film. And break down like why certain things were done certain ways. And I feel like that translates to motion as well.

Just kind of seeing something, trying to figure out why it was done that way and not done in other ways. And kind of like figure out the reason why whoever made it did it that way. Helps you understand why other things should be made in certain ways. I would also suggest learning, learning as much as you can in different tools also helps because coding animation is one thing, but then there are other tools that help you get prototypes and concepts across, across, like Rive is a new one that’s kind of up and coming.

And sometimes timeline animation can help a bit more like visually just by moving a box around. And. The usual animation test that everyone starts off with learning is a bouncing ball and just different animating a ball bouncing across the screen and animate it in 10 different ways. Whether it’s fast, slow, bouncy cartoony or like moon gravity, like animate it in so many different ways and then you can kind of understand the different, the different texture of animation you can do for the same animation.

And then from there, pick which one that you find the most appealing and then animate that style again 10 times for the bouncing ball, but in different variations. And then you’re kind of tweaking and honing your taste for a certain type of animation. And then the next thing you can do from there is choose the one you don’t like, like out of those first 10, choose the one you don’t like.

The most and do 10 variations of that until you make it look like something you like because that’s the thing. There’s there’s no I don’t think there’s any wrong way to animate something, but there is definitely Nicer ways to animate something in a way. You’re not supposed to animate it because it’s not wrong if people like it

It’s like you can do something completely Not what is expected as long as it is pleasant


id: interviews/lochie-axon/emil-55-16
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (55:16)
url_path: /lessons/interviews/lochie-axon/#emil-55-16
markdown_path: /md/sections/interviews/lochie-axon/emil-55-16.md
excerpt:
Yeah, I guess that’s why animations are so hard for some people because there is like with code when you make something wrong There’s like a clear error. Something doesn’t work and with animations, you know, they’re obviously better and worse animations, but it’s not black and white As Michael White has told us, you know.

body:
Yeah, I guess that’s why animations are so hard for some people because there is like with code when you make something wrong There’s like a clear error. Something doesn’t work and with animations, you know, they’re obviously better and worse animations, but it’s not black and white As Michael White has told us, you know.


id: interviews/lochie-axon/lochie-55-33
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (55:33)
url_path: /lessons/interviews/lochie-axon/#lochie-55-33
markdown_path: /md/sections/interviews/lochie-axon/lochie-55-33.md
excerpt:
Yeah, with animation I feel like a lot of the time you just need to iterate as many times as you can until you find your style or your preference or, like, a lot of people what’s that bell curve called? The Dunning Kruger? Is that the one? Yeah. A lot of people, they don’t have any knowledge and they think it’s easy and they have some knowledge and they think it’s super difficult.

body:
Yeah, with animation I feel like a lot of the time you just need to iterate as many times as you can until you find your style or your preference or, like, a lot of people what’s that bell curve called? The Dunning Kruger? Is that the one? Yeah. A lot of people, they don’t have any knowledge and they think it’s easy and they have some knowledge and they think it’s super difficult.

And then they have, or they know they have some knowledge and I think it’s super easy even then, and then you get to the other side and you’re like, Oh, I know how to do all this stuff, but I still don’t know how to do all this other stuff. And it’s like you see it a lot with like people who do PowerPoint presentations, but they add in animations and it’s all crazy.

And it’s like, there are things coming in from the left and the right. It’s like all over the place. And it’s really hard to pay attention to what they’re talking about. When there’s so much stuff going on behind them, but then you see really good presentations where there is animations and transitions between different pages, but they’re all subtle and quick and like, they’re not in the way.

And they’re just kind of like they’re adding to the conversation rather than becoming the focus because it needs to compliment what the content is rather than take control of what people are paying attention to, right?


id: interviews/lochie-axon/emil-56-50
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (56:50)
url_path: /lessons/interviews/lochie-axon/#emil-56-50
markdown_path: /md/sections/interviews/lochie-axon/emil-56-50.md
excerpt:
Yeah. So I guess what I’ve been hearing a couple of times during this interview indirectly is that, you know, a collection of references is very useful.

body:
Yeah. So I guess what I’ve been hearing a couple of times during this interview indirectly is that, you know, a collection of references is very useful.

Like you are building your collection of references all the time by, you know, looking at tweet tweets and insights that you like and whatever. I guess that’s a very useful thing for people to have a collection of references and pull from those references whenever you need to make an animation.


id: interviews/lochie-axon/lochie-57-18
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (57:18)
url_path: /lessons/interviews/lochie-axon/#lochie-57-18
markdown_path: /md/sections/interviews/lochie-axon/lochie-57-18.md
excerpt:
Definitely. I think that everything. Everything is a remix of something else. Like you’re always like everything I make is probably referencing something else that I saw years ago or, and all I’m doing is replicating a lot of the times, but I’m also replicating something that is joined with a bunch of other things that I’ve also like looked at before.

body:
Definitely. I think that everything. Everything is a remix of something else. Like you’re always like everything I make is probably referencing something else that I saw years ago or, and all I’m doing is replicating a lot of the times, but I’m also replicating something that is joined with a bunch of other things that I’ve also like looked at before.

So, and then all that kind of melds into my own style. It’s the same thing like if you learn how to draw, the first thing you do is you draw a little stick figure and then eventually you go, okay, I want to draw something, a face. So you think, how do I draw a face? And you reference like either some people, like they’ll try to draw an actual face or they’ll start referencing like the cartoons that they watch or something.

And then you’ll draw like the little, like two dots and a smile, like adventure time style or something. And then from there people go like, Oh, what if I changed the ears to the ears of a different show that I’ve seen or. a different thing and just all they’re doing is just like creating a different character based on all the things they’ve consumed and all the things they enjoy and all the things they like to look at and then eventually they get something unique and something that’s not been done before or something that’s has its own style and its own visual language and I think the same thing works with.

With animation or even design or any, anything really just like take everything that you like and take inspiration from everywhere and kind of bring it together and create something that is uniquely yours and something that has its own style and just by just keep gathering references and gathering ideas and just keep building, keep making stuff.


id: interviews/lochie-axon/emil-58-59
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Emil (58:59)
url_path: /lessons/interviews/lochie-axon/#emil-58-59
markdown_path: /md/sections/interviews/lochie-axon/emil-58-59.md
excerpt:
Yeah, I think that’s a great way to to end this interview yeah, is there anything else you would want to like share or you know promote right now?

body:
Yeah, I think that’s a great way to to end this interview yeah, is there anything else you would want to like share or you know promote right now?


id: interviews/lochie-axon/lochie-59-09
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (59:09)
url_path: /lessons/interviews/lochie-axon/#lochie-59-09
markdown_path: /md/sections/interviews/lochie-axon/lochie-59-09.md
excerpt:
I don’t know not too much. I’m i’m always on twitter. I’m i’m always lurking but i’m on twitter at lucky axon I have a few different projects i’m working on that.

body:
I don’t know not too much. I’m i’m always on twitter. I’m i’m always lurking but i’m on twitter at lucky axon I have a few different projects i’m working on that.

I’ll be sharing on there For the most part. I just want to see what other people make. I just want to see I just want to see people do cool things. That’s, that’s what I’m most interested in. Yeah, just so if everyone can make cool things, that’d be great. Share them with me. I would love to see them.

Cool.


id: interviews/lochie-axon/lochie-59-42
lesson_id: interviews/lochie-axon
module_slug: interviews
module_title: Interviews
lesson_slug: lochie-axon
lesson_title: Interviews/Lochie Axon
heading: Lochie (59:42)
url_path: /lessons/interviews/lochie-axon/#lochie-59-42
markdown_path: /md/sections/interviews/lochie-axon/lochie-59-42.md
excerpt:
Yeah, thank you, Lucky. And thank you. I, I, it’s really nice to, to, well, I’m very grateful to be on this chat. So, yeah. And it’s really cool to see all the cool things that are coming out of this, this course as well. It’s really cool. Thank you so much.

body:
Yeah, thank you, Lucky. And thank you. I, I, it’s really nice to, to, well, I’m very grateful to be on this chat. So, yeah. And it’s really cool to see all the cool things that are coming out of this, this course as well. It’s really cool. Thank you so much.


id: interviews/mariana-castilho/overview
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Overview
url_path: /lessons/interviews/mariana-castilho/#overview
markdown_path: /md/sections/interviews/mariana-castilho/overview.md
excerpt:
Mariana is a Brazilian product designer currently working at pooolside. She created a project called uilabs.dev where she shares her UI explorations. In this interview we are going to talk about product design, how she learned to code as a designer, and how that influenced her design proces

body:
Henry Heffernan Mariana Castilho Lochie Axon Dennis Brotzky

Mariana is a Brazilian product designer currently working at pooolside. She created a project called uilabs.dev where she shares her UI explorations. In this interview we are going to talk about product design, how she learned to code as a designer, and how that influenced her design proces


id: interviews/mariana-castilho/emil-00-19
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (00:19)
url_path: /lessons/interviews/mariana-castilho/#emil-00-19
markdown_path: /md/sections/interviews/mariana-castilho/emil-00-19.md
excerpt:
Hi everyone. In today’s interview, we are talking to Mariana, who is a product designer at Vercel at the moment. I’m a big fan of her work.

body:
Hi everyone. In today’s interview, we are talking to Mariana, who is a product designer at Vercel at the moment. I’m a big fan of her work.

Hi Mariana, can you tell us a bit more about yourself to start?


id: interviews/mariana-castilho/mariana-00-41
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (00:41)
excerpt: Yeah, sure Emil, I’m super happy to be here.
url_path: /lessons/interviews/mariana-castilho/#mariana-00-41
markdown_path: /md/sections/interviews/mariana-castilho/mariana-00-41.md
body:
Yeah, sure Emil, I’m super happy to be here.

I’m Mariana - I am a Brazilian product designer. I’m currently based in Brazil. I work as a senior product designer at Vercel in projects related to AI, like AI integrations, AI studio. Also marketplace and marketplace integrations. And some of the collaboration projects as well.


id: interviews/mariana-castilho/mariana-01-11
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (01:11)
url_path: /lessons/interviews/mariana-castilho/#mariana-01-11
markdown_path: /md/sections/interviews/mariana-castilho/mariana-01-11.md
excerpt:
Before Vercel, I was working at the Universe, which is an iOS app, basically an easy way to build and publish websites and small commerce.

body:
Before Vercel, I was working at the Universe, which is an iOS app, basically an easy way to build and publish websites and small commerce.

So there I was leading the beginning business and platform, all the product design work related to business and platform. And then I led all the work related to translating all the iOS interfaces and features that we had for web. I’ve been freelancing for a while as well.


id: interviews/mariana-castilho/mariana-01-56
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (01:56)
url_path: /lessons/interviews/mariana-castilho/#mariana-01-56
markdown_path: /md/sections/interviews/mariana-castilho/mariana-01-56.md
excerpt:
That’s a great question because I did advertising marketing in school actually, but I also studied design at the same time, so I was trying to pursue two degrees at the same time.

body:
That’s a great question because I did advertising marketing in school actually, but I also studied design at the same time, so I was trying to pursue two degrees at the same time.

And at some point, it was just a lot. I started to do some internships and stuff. So yeah, it was really a lot to deal with.

Eventually I think my parents at the time, they didn’t really know what really design was. So they said, no - just finish marketing and then figure it out.

So when it comes to design, I feel like my relationship started very early, really when I was a kid. I was very into Dragon Ball and all these cartoons at the time. I grew up on internet forums and small websites.

I always was really into web design, video games, art. So I kind of like my relationship with design started pretty early. But when it comes to interface design, software design - basically I learned alone really. Studying, working, freelancing. I didn’t have an official design degree.


id: interviews/mariana-castilho/emil-03-09
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (03:09)
url_path: /lessons/interviews/mariana-castilho/#emil-03-09
markdown_path: /md/sections/interviews/mariana-castilho/emil-03-09.md
excerpt:
Interesting, so I’m guessing a lot of people listening are also interested how you got your job at Vercel. How did that happen? Did you apply or did someone reach out?

body:
Interesting, so I’m guessing a lot of people listening are also interested how you got your job at Vercel. How did that happen? Did you apply or did someone reach out?


id: interviews/mariana-castilho/mariana-03-28
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (03:28)
url_path: /lessons/interviews/mariana-castilho/#mariana-03-28
markdown_path: /md/sections/interviews/mariana-castilho/mariana-03-28.md
excerpt:
Yeah, so I was always really into publicly sharing my work and explorations that I create in my free time. And I usually share this stuff on X or Twitter or whatever you want to cal it. So yeah, I’d been sharing some work there. And at the time, Guillermo of Vercel CEO saw my work. And yeah, basically he mailed me asking if I was interested in chatting about joining Vercel.

body:
Yeah, so I was always really into publicly sharing my work and explorations that I create in my free time. And I usually share this stuff on X or Twitter or whatever you want to cal it. So yeah, I’d been sharing some work there. And at the time, Guillermo of Vercel CEO saw my work. And yeah, basically he mailed me asking if I was interested in chatting about joining Vercel.

I got super thrilled because I was and I still am a huge fan of Vercel Design Team - I was super happy when he contacted me. Long story short, here I am. But basically Guillermo contacted me after seeing my work on Twitter.


id: interviews/mariana-castilho/emil-04-10
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (04:10)
url_path: /lessons/interviews/mariana-castilho/#emil-04-10
markdown_path: /md/sections/interviews/mariana-castilho/emil-04-10.md
excerpt:
That’s basically what Henry said and what happened to me as well. Yeah, sharing your work is the best thing you can do in this time.

body:
That’s basically what Henry said and what happened to me as well. Yeah, sharing your work is the best thing you can do in this time.

And I guess you had an interview process, right? Like a normal one, but that helped you get noticed?


id: interviews/mariana-castilho/mariana-04-36
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (04:36)
url_path: /lessons/interviews/mariana-castilho/#mariana-04-36
markdown_path: /md/sections/interviews/mariana-castilho/mariana-04-36.md
excerpt:
Yeah, I talked to some people and I interviewed. But for sure, just the fact that he noted my work helped me a lot instead of just applying like everyone else. For sure it gives an advantage, right? Because you’re already noted basically.

body:
Yeah, I talked to some people and I interviewed. But for sure, just the fact that he noted my work helped me a lot instead of just applying like everyone else. For sure it gives an advantage, right? Because you’re already noted basically.

That’s why I really recommend people sharing their work on social media or like X or other platforms. A lot of like my contacts and people that I’ve known that are great came from Twitter, I would say. So building your network and building contacts opens a lot of doors for also freelancing or full time jobs. This is something that I always recommend and forever recommend because it’s really changed my career. My job at Vercel really changed my career. I’m really grateful for all of that.


id: interviews/mariana-castilho/emil-05-37
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (05:37)
url_path: /lessons/interviews/mariana-castilho/#emil-05-37
markdown_path: /md/sections/interviews/mariana-castilho/emil-05-37.md
excerpt:
Yeah, I fully agree. You mentioned, you talked to a few people during the interview process. Did you have to do a design exercise or something? Or was it just talking to people?

body:
Yeah, I fully agree. You mentioned, you talked to a few people during the interview process. Did you have to do a design exercise or something? Or was it just talking to people?


id: interviews/mariana-castilho/mariana-05-53
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (05:53)
url_path: /lessons/interviews/mariana-castilho/#mariana-05-53
markdown_path: /md/sections/interviews/mariana-castilho/mariana-05-53.md
excerpt:
Yeah, that time was more talking to people, talking about my experience, my projects. I think I talked to three or four people at the time. Basically sharing the work that I’m sharing on Twitter - so I felt that people are already kind of familiar with my work and stuff.

body:
Yeah, that time was more talking to people, talking about my experience, my projects. I think I talked to three or four people at the time. Basically sharing the work that I’m sharing on Twitter - so I felt that people are already kind of familiar with my work and stuff.

It was more about like chats, really.


id: interviews/mariana-castilho/emil-06-16
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (06:16)
excerpt: Okay.
url_path: /lessons/interviews/mariana-castilho/#emil-06-16
markdown_path: /md/sections/interviews/mariana-castilho/emil-06-16.md
body:
Okay.

I personally really like your taste in design and, as someone who is not a designer, I’m wondering - like you said you did a lot of stuff - is that the most important part of becoming a designer? What would you say was the biggest accelerator in your career outside of sharing your work, which you just said?


id: interviews/mariana-castilho/mariana-06-56
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (06:56)
url_path: /lessons/interviews/mariana-castilho/#mariana-06-56
markdown_path: /md/sections/interviews/mariana-castilho/mariana-06-56.md
excerpt:
Great question. Really looking back to my career, I think there are really two key factors that helped me a lot to get where I am.

body:
Great question. Really looking back to my career, I think there are really two key factors that helped me a lot to get where I am.

The first one, which I always mention, is having side projects and dedicating time for free explorations outside your work. And obviously, as we mentioned, even better if you can share them publicly. This was and still is key to my process and to really polish and exercise my craft. Mainly because it lets me explore different techniques and different ideas than what I would usually explore in my daily work. And given the time, I need to exercise my craft and my taste, so that’s key. It’s something that I continue to do. That requires great time management. I know sometimes that it’s not easy and sometimes it’s not possible because sometimes just have a lot going on. And there are multiple periods that just have a lot of things in my life in general. And it was just not possible to keep up with the time and energy that things require.

But I think that’s also important and okay to know your limits and allow yourself really to rest and recharge. But yea - getting better and better with this time management and planning how much energy I can invest helped me a lot.

So, for sure, the first thing is side projects or free explorations. Giving yourself some time away from your work to polish your craft really.

The second thing that helps me and helps me still is that I’m really passionate about what I do and I do really have an ambition of creating extraordinary things. And this is more like an aspirational goal for sure. There is no such thing as perfection, but I always try to improve and I’m always trying to get better and better at what I do.

I just love to design and build stuff. So it rarely feels like I’m actually working and it’s actually like an obligation. It just feels natural and something that I want to do. So yeah - this helps me a lot maintaining my motivation high.

I think these are the main two things that’s made and still make a huge difference in really upscaling my career.


id: interviews/mariana-castilho/emil-09-38
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (09:38)
url_path: /lessons/interviews/mariana-castilho/#emil-09-38
markdown_path: /md/sections/interviews/mariana-castilho/emil-09-38.md
excerpt:
Yeah, that helps me with my motivation as well, to trying to get better and better and creating something very, very nice at some point. Something that I can be really proud of. And I know that every day that I do this type of stuff, it helps me to get closer to that.

body:
Yeah, that helps me with my motivation as well, to trying to get better and better and creating something very, very nice at some point. Something that I can be really proud of. And I know that every day that I do this type of stuff, it helps me to get closer to that.


id: interviews/mariana-castilho/mariana-09-59
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (09:59)
url_path: /lessons/interviews/mariana-castilho/#mariana-09-59
markdown_path: /md/sections/interviews/mariana-castilho/mariana-09-59.md
excerpt:
Yeah, and it’s crazy. Like sometimes I revisit some past work from months ago and I completely see total change sometimes in my style and the techniques that I’m using. And I feel like I created this work 10 years ago, but it was really six months ago. So yeah, it’s these daily doses of effort and time and energy that’s built up into really changing how we approach design.

body:
Yeah, and it’s crazy. Like sometimes I revisit some past work from months ago and I completely see total change sometimes in my style and the techniques that I’m using. And I feel like I created this work 10 years ago, but it was really six months ago. So yeah, it’s these daily doses of effort and time and energy that’s built up into really changing how we approach design.


id: interviews/mariana-castilho/emil-10-31
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (10:31)
url_path: /lessons/interviews/mariana-castilho/#emil-10-31
markdown_path: /md/sections/interviews/mariana-castilho/emil-10-31.md
excerpt:
Yeah, I really like that feeling - like looking back at thinking that you made something like you, it’s not what you would do today, or like you would do something, make something better today because that’s like shows that you are actually getting better. But yeah, that’s really cool. And again, I’m not a designer and I’m really curious how designers think.

body:
Yeah, I really like that feeling - like looking back at thinking that you made something like you, it’s not what you would do today, or like you would do something, make something better today because that’s like shows that you are actually getting better. But yeah, that’s really cool. And again, I’m not a designer and I’m really curious how designers think.

What sets apart a great product designer from a good one? What’s the distinction there? In your opinion, obviously, because I guess it’s subjective. But if you look at a designer in general, what do you notice and what makes you feel that he or she is very, very amazing?


id: interviews/mariana-castilho/mariana-11-23
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (11:23)
url_path: /lessons/interviews/mariana-castilho/#mariana-11-23
markdown_path: /md/sections/interviews/mariana-castilho/mariana-11-23.md
excerpt:
Yeah, that’s very subjective and that’s my personal take. Obviously that’s not a rule, but that’s how I feel about it.

body:
Yeah, that’s very subjective and that’s my personal take. Obviously that’s not a rule, but that’s how I feel about it.

To me, what I try to observe is that the designer in question is nailing both form and function. So in a nutshell: function is really like how you can work on the problem space and break down really complex problems and reparations into like simple interfaces and solutions that are really relevant to that problem. So nailing this part of the function is really important because product design/software design, they need to have a purpose and they need to have an intention behind it. It’s not only about looking great. So that’s the first part. If the problem space is being well-defined and if the problem questions being solved in an elegant, simple, and intuitive way.

The second part is the form part, which is really related to taste, to really differentiate what looks and feels great from what doesn’t. And craft to know how to execute with excellence, like your vision based on your taste, which is also part of this equation.

Often I see some things online and tweets where I see that the idea is really good and what’s behind the idea is really good, but the execution is just not quite there yet because either it lacks like taste or because the technique’s not quite there yet.

That’s my personal opinion, of course, but I feel like a great product designer has a great balance between nailing the idea and the problem solving part, but also having the taste and the technique to create something that’s amazing.


id: interviews/mariana-castilho/mariana-13-22
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (13:22)
url_path: /lessons/interviews/mariana-castilho/#mariana-13-22
markdown_path: /md/sections/interviews/mariana-castilho/mariana-13-22.md
excerpt:
I think it really depends on your background and your skills really. I don’t know, that’s a great question. I would say that it depends on the project as well. I feel like there are some projects that is much easier to nail the problem space and to come up with a great idea and a great foundational UI and it’s hard to make these UI really interesting, appealing, and delightful to use.

body:
I think it really depends on your background and your skills really. I don’t know, that’s a great question. I would say that it depends on the project as well. I feel like there are some projects that is much easier to nail the problem space and to come up with a great idea and a great foundational UI and it’s hard to make these UI really interesting, appealing, and delightful to use.

Some other projects are really the opposite - like the visual idea and how it should feel is kind of clear in your mind, but you’re struggling to link that with the actual function and how it should actually solve the problem. I think these two things should work in parallel, really.

I don’t have a good answer for this question. I think it depends.


id: interviews/mariana-castilho/emil-14-20
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (14:20)
excerpt: No, I think that’s a great answer. So I think we can move to another part.
url_path: /lessons/interviews/mariana-castilho/#emil-14-20
markdown_path: /md/sections/interviews/mariana-castilho/emil-14-20.md
body:
No, I think that’s a great answer. So I think we can move to another part.

I don’t know design but you obviously started UI labs where you share your things you built with code. Obviously a lot of people like this project , and I like this project as well and the first question is why did you decide to start learning code?


id: interviews/mariana-castilho/mariana-15-04
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (15:04)
url_path: /lessons/interviews/mariana-castilho/#mariana-15-04
markdown_path: /md/sections/interviews/mariana-castilho/mariana-15-04.md
excerpt:
Yeah, that’s a great question. And I’m happy to see that a lot of people like the project. It started not really pretentious. I didn’t want to achieve nothing specific just to share some explorations. And yeah, people seem to like it. So I’m really happy about it.

body:
Yeah, that’s a great question. And I’m happy to see that a lot of people like the project. It started not really pretentious. I didn’t want to achieve nothing specific just to share some explorations. And yeah, people seem to like it. So I’m really happy about it.

I think my motivation to learn code and to go deeper into UI engineering came from a really strong desire to know how to build the work that I was creating. And I think a lot of these other designers can relate to that, but a lot of times when you finish your high fidelity designs and you have like your Figma file and everything looks great and you’re feeling happy about it, and you hand over to the engineer and hope they will be the right; even though they built it completely right and it’s like one-to-one with your Figma file, everything feels perfect, like spacing, textiles, color styles, everything’s like exactly as it should be; sometimes just doesn’t translate right.

It’s more of a sensation and less something like objectively wrong, if that makes sense. Like there’s something missing and you cannot tell exactly what it is because on the paper everything is matching. And I think this frustration of not knowing what was missing grew into a place that I just wanted to be autonomous to build my own work and really to go on the deepest level of understanding: how I can build it and really try to find the secret sauce. That was really the motivation that made me go deeper into UI engineering and eventually build UI Labs because, as I mentioned before, side projects and explorations are my success formula to learn something. So I just applied the same formula with code. I just started to work on side projects and tried to do stuff myself. And eventually this little project came out.


id: interviews/mariana-castilho/emil-17-06
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (17:06)
url_path: /lessons/interviews/mariana-castilho/#emil-17-06
markdown_path: /md/sections/interviews/mariana-castilho/emil-17-06.md
excerpt:
That’s really cool. You said you started doing that because you wanted to build the designs or try to learn it, but does that also mean that you work in code at Vercel as well or is that not the case?

body:
That’s really cool. You said you started doing that because you wanted to build the designs or try to learn it, but does that also mean that you work in code at Vercel as well or is that not the case?


id: interviews/mariana-castilho/mariana-17-26
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (17:26)
url_path: /lessons/interviews/mariana-castilho/#mariana-17-26
markdown_path: /md/sections/interviews/mariana-castilho/mariana-17-26.md
excerpt:
In the beginning that was not the case. And that’s why exactly why my side projects were super important because - I will speak from my own experience - when I was starting to learn code and UI engineering, I was not feeling confident on my skills and I was not feeling confident that I was making the right decisions and I had the right techniques to solve some specific engineering problems. So when I started to work on UI labs and some other like small projects on the side during my free time, I started to feel like more and more confident that I knew how to solve like really a lot of different problems that I didn’t knew like some months ago. So in the beginning, I was not working code at Vercel and at some point it’s built into a moment that I felt confident about it. So just like drop some lines here and there. I pushed some PRs and I learned as well from these PRs. So today - yes, it’s not my primary function at Vercel. I’m primarily designing. But when I have some time, I love to jump into code and just like try to fix things here and there, build a component myself.

body:
In the beginning that was not the case. And that’s why exactly why my side projects were super important because - I will speak from my own experience - when I was starting to learn code and UI engineering, I was not feeling confident on my skills and I was not feeling confident that I was making the right decisions and I had the right techniques to solve some specific engineering problems. So when I started to work on UI labs and some other like small projects on the side during my free time, I started to feel like more and more confident that I knew how to solve like really a lot of different problems that I didn’t knew like some months ago. So in the beginning, I was not working code at Vercel and at some point it’s built into a moment that I felt confident about it. So just like drop some lines here and there. I pushed some PRs and I learned as well from these PRs. So today - yes, it’s not my primary function at Vercel. I’m primarily designing. But when I have some time, I love to jump into code and just like try to fix things here and there, build a component myself.


id: interviews/mariana-castilho/emil-18-34
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (18:34)
url_path: /lessons/interviews/mariana-castilho/#emil-18-34
markdown_path: /md/sections/interviews/mariana-castilho/emil-18-34.md
excerpt:
Yeah, that’s really cool. It’s really, really powerful as well. You can just do everything yourself.Yeah, that’s really cool. It’s really, really powerful as well. You can just do everything yourself.

body:
Yeah, that’s really cool. It’s really, really powerful as well. You can just do everything yourself.Yeah, that’s really cool. It’s really, really powerful as well. You can just do everything yourself.


id: interviews/mariana-castilho/mariana-18-42
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (18:42)
url_path: /lessons/interviews/mariana-castilho/#mariana-18-42
markdown_path: /md/sections/interviews/mariana-castilho/mariana-18-42.md
excerpt:
Yeah, and also when you communicate with engineers it’s kind of different because you will learn how to speak the same language. Mommunication is just so much easier than if you didn’t like know how to code. A lot of things really improved since I went into UI engineering really.

body:
Yeah, and also when you communicate with engineers it’s kind of different because you will learn how to speak the same language. Mommunication is just so much easier than if you didn’t like know how to code. A lot of things really improved since I went into UI engineering really.


id: interviews/mariana-castilho/emil-19-01
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (19:01)
url_path: /lessons/interviews/mariana-castilho/#emil-19-01
markdown_path: /md/sections/interviews/mariana-castilho/emil-19-01.md
excerpt:
And how did you learn it specifically? Because engineering in general is pretty big right? And can be quite overwhelming at the start. Did you read a lot of articles, bought a course that helped you?

body:
And how did you learn it specifically? Because engineering in general is pretty big right? And can be quite overwhelming at the start. Did you read a lot of articles, bought a course that helped you?


id: interviews/mariana-castilho/mariana-19-28
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (19:28)
url_path: /lessons/interviews/mariana-castilho/#mariana-19-28
markdown_path: /md/sections/interviews/mariana-castilho/mariana-19-28.md
excerpt:
Honestly, just sitting down and studying, getting access to some great content like Josh Comeau’s course really helped me on React, CSS. Sam Selikoff’s Build UI, also super nice, and your course as well, Animations on the Web, you know that I’m a fan of it. For the animation part, it helped me a lot. There’s so many great content outside. They’re from great creators, really great people. They’re willing to help. Basically I just studied alone, watched some courses. The key part to learn and to really solidify all the knowledge was starting to build stuff and make mistakes and research and learn how to solve these mistakes.

body:
Honestly, just sitting down and studying, getting access to some great content like Josh Comeau’s course really helped me on React, CSS. Sam Selikoff’s Build UI, also super nice, and your course as well, Animations on the Web, you know that I’m a fan of it. For the animation part, it helped me a lot. There’s so many great content outside. They’re from great creators, really great people. They’re willing to help. Basically I just studied alone, watched some courses. The key part to learn and to really solidify all the knowledge was starting to build stuff and make mistakes and research and learn how to solve these mistakes.


id: interviews/mariana-castilho/emil-20-19
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (20:19)
url_path: /lessons/interviews/mariana-castilho/#emil-20-19
markdown_path: /md/sections/interviews/mariana-castilho/emil-20-19.md
excerpt:
How long did it take to get you to where you are today in terms of coding skills? What we can see on UILabs, for example.

body:
How long did it take to get you to where you are today in terms of coding skills? What we can see on UILabs, for example.


id: interviews/mariana-castilho/mariana-20-34
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (20:34)
url_path: /lessons/interviews/mariana-castilho/#mariana-20-34
markdown_path: /md/sections/interviews/mariana-castilho/mariana-20-34.md
excerpt:
I feel like I’m still learning really. Like I don’t feel like I’ll ever stop learning. But I started UILabs in February, I guess.

body:
I feel like I’m still learning really. Like I don’t feel like I’ll ever stop learning. But I started UILabs in February, I guess.

Even on UILabs, I see my first components there and the latest ones and I already see a huge difference in terms of technique/quality. So I really see myself evolving also on the engineering side. I don’t know really, I don’t know how to precise the time that it took because everyday is a new day that I want to learn something new so I’m not really doing any math in my head on how much time I need to arrive on that specific point.

I also don’t want to send a message like, “hey you should do that for this amount of time”. You learn it because people are different and these formulas never really work.


id: interviews/mariana-castilho/emil-21-35
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (21:35)
url_path: /lessons/interviews/mariana-castilho/#emil-21-35
markdown_path: /md/sections/interviews/mariana-castilho/emil-21-35.md
excerpt:
Yeah, sure. Was there like anything that surprised you about coding? Because like you were designing for a long time and you kind of knew and you were working with engineers for a long time.

body:
Yeah, sure. Was there like anything that surprised you about coding? Because like you were designing for a long time and you kind of knew and you were working with engineers for a long time.

Was there something that made you say “wow, I didn’t expect it to work this way” or something like that. I’m just really curious about it.


id: interviews/mariana-castilho/mariana-21-56
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (21:56)
url_path: /lessons/interviews/mariana-castilho/#mariana-21-56
markdown_path: /md/sections/interviews/mariana-castilho/mariana-21-56.md
excerpt:
The most surprising thing to me that I was not really expecting or I didn’t foresee was really how learning to code would influence my designs and my work as a product designer. So kind of like the other way around really.

body:
The most surprising thing to me that I was not really expecting or I didn’t foresee was really how learning to code would influence my designs and my work as a product designer. So kind of like the other way around really.

Learning how to code completely changed the way I design. I feel that now I design it with much more intention because I know exactly how the final output can be built. So while I’m designing, while I’m in Figma, for instance, I’m all the time doing like this relationship with code and seeing, “okay, now here I can apply Flexbox, I can set a padding of like four pixels” or whatever. I’m all the time doing this math and this really makes my design much more intentional, really. I’m also much more critic about like polish, how the state should transition and how the experience overall should feel. In general I feel like the surprising thing to me was how this changed who I am as a designer really and my work as a designer.


id: interviews/mariana-castilho/emil-23-07
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (23:07)
excerpt: Right, that was kind of my next question, but you answer it already.
url_path: /lessons/interviews/mariana-castilho/#emil-23-07
markdown_path: /md/sections/interviews/mariana-castilho/emil-23-07.md
body:
Right, that was kind of my next question, but you answer it already.

Also from an engineering perspective, you can sort of see who is a designer that knows how to code based on the Figma designs that you see, which is also very interesting. It confirms the thing you just said, that you think about Flexbox and everything, how you could do it.

Another UI labs-related question. Do you design it in Figma or do you jump straight in the code?


id: interviews/mariana-castilho/mariana-23-53
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (23:53)
excerpt: That’s a great question and some people ask me this question on Twitter.
url_path: /lessons/interviews/mariana-castilho/#mariana-23-53
markdown_path: /md/sections/interviews/mariana-castilho/mariana-23-53.md
body:
That’s a great question and some people ask me this question on Twitter.

Most of the times I start sketching in Figma just because it helps me exploring different ideas faster than I would take in code. In Figma, I feel free to just create multiple frames and go crazy and see what sticks really. But once the general idea is locked in and I know exactly what I want to build. Most of the times I don’t even finish my designs in Figma, I just drop Figma and I move directly into code, and I start creating the UI there. 99% of the times, the final output in code and what goes into production looks nothing like my initial sketch in Figma.

When I start to code, the direction usually changes or I realize that there are some certain constraints or behaviors that I didn’t anticipate when I was designing Figma. I create an improvisation of code to get to the final outputs that I share on UI labs and social media. That’s really the workflow that I found that works best to me.

About Figma prototypes and stuff, I never use it really. I use it more for flows, for instance. If I want to explain how a flow should behave - like transition between screens. For this specific goal, I use Figma prototype. But apart from that, to create animations for component animations and stuff, never. Everything into code.


id: interviews/mariana-castilho/emil-25-34
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (25:34)
url_path: /lessons/interviews/mariana-castilho/#emil-25-34
markdown_path: /md/sections/interviews/mariana-castilho/emil-25-34.md
excerpt:
Okay, so you just like wire the Figma designs up so that you can click on the button and go to a different page basically.

body:
Okay, so you just like wire the Figma designs up so that you can click on the button and go to a different page basically.


id: interviews/mariana-castilho/mariana-25-42
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (25:42)
url_path: /lessons/interviews/mariana-castilho/#mariana-25-42
markdown_path: /md/sections/interviews/mariana-castilho/mariana-25-42.md
excerpt:
Yeah, usually when I need to explain to some other people what I’m thinking about a specific flow, yes. But that’s kind of it.

body:
Yeah, usually when I need to explain to some other people what I’m thinking about a specific flow, yes. But that’s kind of it.

For more polishing animations. it’s just easier to do directly into code because you have more granular control over the parameters than using Figma prototype. It’s just easier to do directly into code.


id: interviews/mariana-castilho/emil-26-09
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (26:09)
url_path: /lessons/interviews/mariana-castilho/#emil-26-09
markdown_path: /md/sections/interviews/mariana-castilho/emil-26-09.md
excerpt:
Yeah, that makes sense. When you work on a side project or at Vercel - let’s say you’re stuck on a problem or on a design task in general, where do you get your inspiration from? Are there any people you look up to? Any books, art? How do you handle being stuck?

body:
Yeah, that makes sense. When you work on a side project or at Vercel - let’s say you’re stuck on a problem or on a design task in general, where do you get your inspiration from? Are there any people you look up to? Any books, art? How do you handle being stuck?


id: interviews/mariana-castilho/mariana-26-38
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (26:38)
url_path: /lessons/interviews/mariana-castilho/#mariana-26-38
markdown_path: /md/sections/interviews/mariana-castilho/mariana-26-38.md
excerpt:
Sometimes I just can’t stand it, it never goes away and I stay blocked for like days in a row which sucks. Usually, inspiration comes from really random places like art. I’m really into art - I love going to museums and I love trying to rationalize what makes great art great, really, so that’s something that I really enjoy. But also video games, I’m super into video games, nature, movies, all this cliche.

body:
Sometimes I just can’t stand it, it never goes away and I stay blocked for like days in a row which sucks. Usually, inspiration comes from really random places like art. I’m really into art - I love going to museums and I love trying to rationalize what makes great art great, really, so that’s something that I really enjoy. But also video games, I’m super into video games, nature, movies, all this cliche.

For sure there are some people and some teams that I look up to. I really like the Vercel design team. It’s an amazing group of product designers and product engineers. They inspire me a lot. A lot of times when I’m stuck into some problem on Vercel or there are some things that I don’t know exactly how to design or I’m having like a creative block - I just talk to some people from the team and I see their work and they usually really inspire me a lot. There’s also Family team that has a super incredible level of consistency, shipping, excellent stuff. The Linear team. I feel like we’re fortunate to live in a era that we have a lot of great talents around us. I really look up to different people from different teams. I think they’re all amazing.


id: interviews/mariana-castilho/emil-28-01
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (28:01)
url_path: /lessons/interviews/mariana-castilho/#emil-28-01
markdown_path: /md/sections/interviews/mariana-castilho/emil-28-01.md
excerpt:
You mentioned thinking about art and what makes art great. And I have a related question. But how do you think about taste and how can someone develop if someone can develop taste at all in your opinion? Taste when it comes to design specifically, and how would you get better at that in your opinion.

body:
You mentioned thinking about art and what makes art great. And I have a related question. But how do you think about taste and how can someone develop if someone can develop taste at all in your opinion? Taste when it comes to design specifically, and how would you get better at that in your opinion.


id: interviews/mariana-castilho/mariana-28-35
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (28:35)
url_path: /lessons/interviews/mariana-castilho/#mariana-28-35
markdown_path: /md/sections/interviews/mariana-castilho/mariana-28-35.md
excerpt:
Well, I think this question deserves an entire episode. That’s again my personal take, not claiming to be the source of truth, but I do feel like taste can be developed. I do feel like you can also develop taste in general and not only taste for design.

body:
Well, I think this question deserves an entire episode. That’s again my personal take, not claiming to be the source of truth, but I do feel like taste can be developed. I do feel like you can also develop taste in general and not only taste for design.

The first thing is to define what’s taste, right? And to me, taste is really the ability to recognize some patterns and systems that feel extraordinary and feels that have a high aesthetic value. So that’s for me what’s taste. It’s also kind of subjective, but that’s how I try to rationalize it. These patterns and systems can be composed by repetition, balance, symmetry, all these general rules that we also see in design.

To me, the best way to exercise taste is being exposed to great stuff. Being exposed to great art, to nature, to great design, to great music, and be really intentional and refine your intuition about why something has a high aesthetic value and try to translate that into all these characteristics that I mentioned, like balance, symmetry.

If I’m seeing a painting and I feel like “wow, that’s incredible, that’s extraordinary”, and I feel like there is a lot of great taste into that - I just try to rationalize. “Okay, why do I feel this way? Is it about the balance, is it about the composition, is it about repetition, is it about the color scheme?”.

It’s the same thing for design. That’s what I’m doing all the time when I see work online or like magazines, or some sort of design work that’s extraordinary. I just try to understand why this touches me in my heart and why I feel that’s extraordinary. Sometimes I come with “I feel like it’s because it’s balanced like these” or “the colors are really pleasing” or something else. Or sometimes I just cannot tell and it remains a mystery to myself, but I keep thinking about it.

I think people should talk more about taste because at the same time that feels super subjective. I do feel that it can be developed and can be rationalized and people can put more intention into trying to develop their own tastes.

This is a very extensive topic and probably I’m not the most skilled person to talk about it, but it’s something that’s on my mind all the time when I’m working.


id: interviews/mariana-castilho/emil-31-17
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (31:17)
url_path: /lessons/interviews/mariana-castilho/#emil-31-17
markdown_path: /md/sections/interviews/mariana-castilho/emil-31-17.md
excerpt:
Yeah, okay, that’s very interesting. So if you browse the web, let’s say, or even on Twitter, you also pay attention to the things you see. And if you find something you think that’s very beautiful, like even a website or a tweet and animation, you try to think why you think it’s beautiful.

body:
Yeah, okay, that’s very interesting. So if you browse the web, let’s say, or even on Twitter, you also pay attention to the things you see. And if you find something you think that’s very beautiful, like even a website or a tweet and animation, you try to think why you think it’s beautiful.


id: interviews/mariana-castilho/mariana-31-37
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (31:37)
url_path: /lessons/interviews/mariana-castilho/#mariana-31-37
markdown_path: /md/sections/interviews/mariana-castilho/mariana-31-37.md
excerpt:
Yes, yes. It’s kind of like - as my side projects, which are something that I try to keep as my everyday practice, I try to do this as well.

body:
Yes, yes. It’s kind of like - as my side projects, which are something that I try to keep as my everyday practice, I try to do this as well.

When I’m like browsing the web, or reading some books or magazines - the medium doesn’t really matter it’s more about the intention behind it - I try to ask myself this question.

Sometimes it’s not even something that struck me as something beautiful, but something that touched me or caught my attention for some reason. I try to just rationalize why this specific thing caught my attention among the sea of other design work being put on Twitter, because there’s a lot of work being put on there. A lot of great work, we have a lot of great creators.

When something really caught my attention in a special way, I really spend some time just meditating around that and trying to understand what makes it so unique and so extraordinary.


id: interviews/mariana-castilho/emil-32-39
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (32:39)
url_path: /lessons/interviews/mariana-castilho/#emil-32-39
markdown_path: /md/sections/interviews/mariana-castilho/emil-32-39.md
excerpt:
Yeah, that’s very interesting. I do that as well. I scroll on Twitter a lot, and it’s kind of useless but I also think that it helps me refine my taste. I guess there are better ways to do that, or more productive ways, but I don’t.

body:
Yeah, that’s very interesting. I do that as well. I scroll on Twitter a lot, and it’s kind of useless but I also think that it helps me refine my taste. I guess there are better ways to do that, or more productive ways, but I don’t.


id: interviews/mariana-castilho/mariana-32-59
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (32:59)
url_path: /lessons/interviews/mariana-castilho/#mariana-32-59
markdown_path: /md/sections/interviews/mariana-castilho/mariana-32-59.md
excerpt:
I think it’s fair. I do that a lot as well. Even to see things that sometimes I acknowledge that there’s taste behind and there’s clear intention, but that’s not something that’s aligned with my own taste.

body:
I think it’s fair. I do that a lot as well. Even to see things that sometimes I acknowledge that there’s taste behind and there’s clear intention, but that’s not something that’s aligned with my own taste.

I think that there is also this thing about perceiving taste and intention, but also nurturing your own. There’s a lot of work that I see where it’s polished, there is a clear intention and there is taste behind it, but it’s not really aligned with my own taste and what I’m nurturing for myself. But I also think it’s interesting to really build and create this distinction - find your own style, which sometimes is hard.


id: interviews/mariana-castilho/emil-33-39
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (33:39)
url_path: /lessons/interviews/mariana-castilho/#emil-33-39
markdown_path: /md/sections/interviews/mariana-castilho/emil-33-39.md
excerpt:
Yeah, that makes a lot of sense. We are close to the end, but something you published - last week, actually, at the time of this recording - is an announcement that you are going to make a course together with Derek from Clark.

body:
Yeah, that makes a lot of sense. We are close to the end, but something you published - last week, actually, at the time of this recording - is an announcement that you are going to make a course together with Derek from Clark.

Why did you decide to do it and why this type of course, sort of an engineering course for designers, right?


id: interviews/mariana-castilho/mariana-34-27
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (34:27)
excerpt: Wow, this is a philosophical question.
url_path: /lessons/interviews/mariana-castilho/#mariana-34-27
markdown_path: /md/sections/interviews/mariana-castilho/mariana-34-27.md
body:
Wow, this is a philosophical question.

I am creating this course with Derek, who is amazing. My motivation was really to build something that I would have liked to see when I was starting to learn how to code and really making UI engineering more approachable for designers.

When I started to work some courses and stuff that were directed to engineers, I felt lost in the beginning and it took me some time to learn how to start because there’s like so many slangs and so many different ways of approaching those specific problems that I was not used to because my mindset was like a designer mindset.

So our ambition is really try to create something that talks directly to designers and to the designer mindset, and helps build this bridge. These are some cool techniques to come to create your own components, but that’s how you like migrate these into a UI engineer mindset with different concerns and different things to think about.

Just trying to create something that I would have liked to see. That’s the key motivation behind it.


id: interviews/mariana-castilho/emil-35-52
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (35:52)
excerpt: Yeah, that’s really amazing. I’m very interested in the course.
url_path: /lessons/interviews/mariana-castilho/#emil-35-52
markdown_path: /md/sections/interviews/mariana-castilho/emil-35-52.md
body:
Yeah, that’s really amazing. I’m very interested in the course.

Will there also be a design part of the course where you actually design the stuff that you’re going to build or is it code-only basically?


id: interviews/mariana-castilho/mariana-36-14
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (36:14)
excerpt: Yeah, it’s going to be a lot of design parts.
url_path: /lessons/interviews/mariana-castilho/#mariana-36-14
markdown_path: /md/sections/interviews/mariana-castilho/mariana-36-14.md
body:
Yeah, it’s going to be a lot of design parts.

This is still being decided, but we also had a lot of great response from engineering, wanting to learn a little bit more about design, which is super interesting.

TL;DR still defining the structure of the chorus. We’re working on that. But the idea is that we will have parts where we will design some components from scratch, trying to teach some cool techniques. And then we’ll take these designs and build also from scratch. So basically you learn how to design and to build the components and the interfaces from scratch. That’s the idea.


id: interviews/mariana-castilho/emil-36-56
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (36:56)
url_path: /lessons/interviews/mariana-castilho/#emil-36-56
markdown_path: /md/sections/interviews/mariana-castilho/emil-36-56.md
excerpt:
Nice. That’s amazing. It’s an insta purchase for me, so I can’t wait when it’s going to be released.

body:
Nice. That’s amazing. It’s an insta purchase for me, so I can’t wait when it’s going to be released.

Let’s go back to for the last question: what advice would you give someone outside of the advice you’ve given already in this interview for someone who is looking to improve their design skills, whether it’s an engineer that wants to get into design or someone that just wants to become a designer? Are there any books courses or anything else that you would do if you had to learn it again?


id: interviews/mariana-castilho/mariana-37-38
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (37:38)
url_path: /lessons/interviews/mariana-castilho/#mariana-37-38
markdown_path: /md/sections/interviews/mariana-castilho/mariana-37-38.md
excerpt:
I feel like I’ve said it all, honestly. And these are things that I continue to do: projects, explorations, really put intention in your free time and of course, as much as you can, respecting your own boundaries and your own mental health and energy. Put some intention in your free time to exercise something that you want to learn either if it can be design or engineering.

body:
I feel like I’ve said it all, honestly. And these are things that I continue to do: projects, explorations, really put intention in your free time and of course, as much as you can, respecting your own boundaries and your own mental health and energy. Put some intention in your free time to exercise something that you want to learn either if it can be design or engineering.

About courses - I’m a huge fan of your course, Animations on the Web. I’m also a huge fan of Sam Selikoff, Josh Coumeau. These courses help me a lot.

A lot of people send me messages asking like teach me how you learn, teach me how you got there. But honestly, there’s no secret formula really. It’s more about discipline, time management, and putting the right intention behind things.

I know it’s hard. It’s much easier said than done and I know that I’m saying this now and it sounds super easy but it’s actually not and it’s hard to keep motivation and to keep the energy week after week, month after month and not letting your intention drop but there’s no shortcut. You just need to put some time and learn it really.

And the more you do, the better you get. And from my experience for both design and engineering, the more I design, the more I get better at design and the more I code, the more I get better at engineering. And yeah, there’s really no shortcut. And that’s how I learned at least. So that’s really my advice.


id: interviews/mariana-castilho/emil-39-26
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (39:26)
url_path: /lessons/interviews/mariana-castilho/#emil-39-26
markdown_path: /md/sections/interviews/mariana-castilho/emil-39-26.md
excerpt:
Okay, and when it comes to the discipline you mentioned, do you have have strict rules? Do you work at least a certain amount of time when you start projects, or is it just doing it every day and that’s it?

body:
Okay, and when it comes to the discipline you mentioned, do you have have strict rules? Do you work at least a certain amount of time when you start projects, or is it just doing it every day and that’s it?


id: interviews/mariana-castilho/mariana-39-40
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (39:40)
url_path: /lessons/interviews/mariana-castilho/#mariana-39-40
markdown_path: /md/sections/interviews/mariana-castilho/mariana-39-40.md
excerpt:
I don’t have any strict rule. Overall I am someone very disciplined in all my life. I’ve always been like this, so it comes kind of naturally to me to commit to something and to stick to it.

body:
I don’t have any strict rule. Overall I am someone very disciplined in all my life. I’ve always been like this, so it comes kind of naturally to me to commit to something and to stick to it.

But something that I’ve learned is actually how to really respect my mental space and my energy as well. Like we know each other and you know that I’m really passionate about design and engineering and like building stuff and rarely it feels like I’m working. It’s really something that I’m passionate about. And a lot of times I just felt on my body and in my mind that I was just giving it too much. I was just putting too much time and too much energy. I was like not paying attention to other stuff that are also important to me and respecting my time to recharge and rest.

So I kind of learned the opposite. I kind of learned how to let myself recharge, let myself really do other stuff, go do some sports or hang out with my friends and read a book and really respect my limits, which exist and I’m very human. I feel like the discipline part for me was the easiest one. It took me some time to learn on how to give my body and my mind the rest that they need. I used to feel guilty about it to be honest, like in days I was not really feeling like working on my side projects and stuff, I was feeling guilty and I felt like “I’m wasting time”, but that’s absolutely opposite. When I take a few days of a break to just do something else, I come in much more recharged and much more energy and creativity to work all my side projects, or even at my work.

My last advice would be to go full in, but also respect your body and your mental health. It’s really, really important. If you go all in, but your mind’s not good and your body’s not good, your health’s not good, nothing of this really matters at the end. Just prioritize your health, your mental health and try to get as much discipline as you can.


id: interviews/mariana-castilho/emil-42-06
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (42:06)
url_path: /lessons/interviews/mariana-castilho/#emil-42-06
markdown_path: /md/sections/interviews/mariana-castilho/emil-42-06.md
excerpt:
Yeah, that’s really good that you said that. You said that you felt guilty before about not doing something, and seeing people posting great stuff on Twitter or somewhere else also makes you even more guilty of not doing something because you see all those people post amazing things. But oftentimes it’s just an illusion, because I don’t do stuff all the time, but I do post on Twitter the stuff that I make.

body:
Yeah, that’s really good that you said that. You said that you felt guilty before about not doing something, and seeing people posting great stuff on Twitter or somewhere else also makes you even more guilty of not doing something because you see all those people post amazing things. But oftentimes it’s just an illusion, because I don’t do stuff all the time, but I do post on Twitter the stuff that I make.

So it can create an impression as if you or me are working 24/7 on it, but that’s obviously not the case. And I also feel guilty sometimes.


id: interviews/mariana-castilho/mariana-42-49
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (42:49)
url_path: /lessons/interviews/mariana-castilho/#mariana-42-49
markdown_path: /md/sections/interviews/mariana-castilho/mariana-42-49.md
excerpt:
It’s also learning about how to deal with our own frustrations of seeing great work - like “oh my god, I wanted to create something like this and what am I doing with my time, I should be working and polishing my craft” - which I think is a great mindset and it’s my mindset - but honestly, for real, at the end of the day, if you’re not healthy, if our mental health is not good, it’s useless because at some point you break at some points our body tells us to stop and just put attention on recharging and resting and taking care of your relationships, of your life outside work, which to me is really important.

body:
It’s also learning about how to deal with our own frustrations of seeing great work - like “oh my god, I wanted to create something like this and what am I doing with my time, I should be working and polishing my craft” - which I think is a great mindset and it’s my mindset - but honestly, for real, at the end of the day, if you’re not healthy, if our mental health is not good, it’s useless because at some point you break at some points our body tells us to stop and just put attention on recharging and resting and taking care of your relationships, of your life outside work, which to me is really important.

This is something that I would say that I’m still learning how to deal with that, with guilt and feeling that I should be working more. But today I do really appreciate all the time that I’m not working and I’m doing something else because there’s also a lot of other stuff. They’re super important to me and I feel great to be able to take care of them as well.


id: interviews/mariana-castilho/emil-44-01
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (44:01)
excerpt: Yeah, that’s very good for you. And I agree with everything you said.
url_path: /lessons/interviews/mariana-castilho/#emil-44-01
markdown_path: /md/sections/interviews/mariana-castilho/emil-44-01.md
body:
Yeah, that’s very good for you. And I agree with everything you said.

Those are all the questions I had for you. It was great to talk to you. Is there anything else you would like to talk about in this interview?


id: interviews/mariana-castilho/mariana-44-21
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Mariana (44:21)
excerpt: No, not really.
url_path: /lessons/interviews/mariana-castilho/#mariana-44-21
markdown_path: /md/sections/interviews/mariana-castilho/mariana-44-21.md
body:
No, not really.

I came in feeling that it would be more like an interview, but we’ve known each other, so it just feels like a normal chat.

I feel like I’ve shared everything that I want to share. Thanks everyone for listening and for going on UI Labs and giving great feedback. I appreciate it.

Keeping the learning mindset, keeping spirit high - that’s really it.


id: interviews/mariana-castilho/emil-44-51
lesson_id: interviews/mariana-castilho
module_slug: interviews
module_title: Interviews
lesson_slug: mariana-castilho
lesson_title: Interviews/Mariana Castilho
heading: Emil (44:51)
url_path: /lessons/interviews/mariana-castilho/#emil-44-51
markdown_path: /md/sections/interviews/mariana-castilho/emil-44-51.md
excerpt:
Thank you for your time. I’m waiting and others are also waiting for the course. I will link it somewhere down below. Thank you.

body:
Thank you for your time. I’m waiting and others are also waiting for the course. I will link it somewhere down below. Thank you.


id: navigation-menu/animating-the-menu/overview
lesson_id: navigation-menu/animating-the-menu
module_slug: navigation-menu
module_title: Navigation Menu
lesson_slug: animating-the-menu
lesson_title: Animating the menu
heading: Overview
url_path: /lessons/navigation-menu/animating-the-menu/#overview
markdown_path: /md/sections/navigation-menu/animating-the-menu/overview.md
excerpt:
Let’s try and build our menu. This is how our menu will look like after we’re done with the exercises:

body:
Let’s try and build our menu. This is how our menu will look like after we’re done with the exercises:

This lesson is split into multiple exercises to reduce complexity. Before we dive into them, let’s go through the starting code first.


id: navigation-menu/animating-the-menu/starting-code
lesson_id: navigation-menu/animating-the-menu
module_slug: navigation-menu
module_title: Navigation Menu
lesson_slug: animating-the-menu
lesson_title: Animating the menu
heading: Starting code
url_path: /lessons/navigation-menu/animating-the-menu/#starting-code
markdown_path: /md/sections/navigation-menu/animating-the-menu/starting-code.md
excerpt:
Radix’s primitives are compound components, which means that each component is actually a group of smaller components that all work together to perform a task. Radix has an anatomy section for each component, which shows how the group of components is structured.

body:
Radix’s primitives are compound components, which means that each component is actually a group of smaller components that all work together to perform a task. Radix has an anatomy section for each component, which shows how the group of components is structured.

Each NavigationMenu.Item is a container for NavigationMenu.Trigger that when hovered opens NavigationMenu.Content. NavigationMenu.Viewport is the element in which the content is rendered. I also created a <ListItem /> component to not repeat the same code for each list item.

This code is pretty straightforward once you understand what each component is responsible for. You can also read the API reference to understand it better.

There are also some styles already applied to the menu. I’ll not cover them in details as I would prefer to focus on the animations, but feel free to read them if you want to understand how I styled it.


id: navigation-menu/animating-the-menu/width-animation
lesson_id: navigation-menu/animating-the-menu
module_slug: navigation-menu
module_title: Navigation Menu
lesson_slug: animating-the-menu
lesson_title: Animating the menu
heading: Width animation
url_path: /lessons/navigation-menu/animating-the-menu/#width-animation
markdown_path: /md/sections/navigation-menu/animating-the-menu/width-animation.md
excerpt:
The first exercise is about animating the width of the menu as its content changes. I don’t give you a lot of hints on purpose, as all the answers can be found in Radix’s Docs. The end result should look like this:

body:
The first exercise is about animating the width of the menu as its content changes. I don’t give you a lot of hints on purpose, as all the answers can be found in Radix’s Docs. The end result should look like this:

This is partially an exercise about how to use an external library and use docs correctly. If you are stuck, you can use the hint below. Also, you are free to choose your own easing and duration for all animations, but think about the principles you learned in the first module. I’ll explain my choices as well.

import * as NavigationMenu from "@radix-ui/react-navigation-menu";
import "./styles.css";

export default function Orchestration() {
return (
  <NavigationMenu.Root className="root">
      <NavigationMenu.List className="menu-list">
        <NavigationMenu.Item>
          <NavigationMenu.Trigger className="trigger">
            Interviews
          </NavigationMenu.Trigger>
          <NavigationMenu.Content className="content">
            <ul className="list one">
              <li style={{ gridRow: "span 3" }}>
                <NavigationMenu.Link asChild>
                  <a className="callout" href="/">
                    <svg
                      width="24"
                      height="24"
                      viewBox="0 0 400 400"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      className="logo"
                    >
                      <g clipPath="url(#clip0_2453_12901)">
                        <path
                          d="M400 67.2214C399.995 49.482 392.946 32.4706 380.402 19.9269C367.859 7.38321 350.847 0.334041 333.108 0.329055C300.663 -9.31323e-05 273.861 23.1814 267.212 53.6417H265.557C262.472 38.5604 254.283 25.0035 242.369 15.2553C230.456 5.50702 215.546 0.163361 200.153 0.124706C184.759 0.0860515 169.823 5.35476 157.861 15.0431C145.898 24.7314 137.641 38.247 134.481 53.3125H132.826C130.364 41.4247 124.722 30.4276 116.503 21.4935C108.283 12.5593 97.7934 6.02281 86.1515 2.58075C74.5096 -0.861307 62.1519 -1.07995 50.3955 1.94812C38.6392 4.97619 27.9247 11.1375 19.3942 19.7753C10.8637 28.4131 4.83689 39.2038 1.95605 50.9971C-0.924786 62.7904 -0.551646 75.1444 3.0357 86.7423C6.62305 98.3403 13.2902 108.747 22.3264 116.855C31.3627 124.962 42.4294 130.465 54.3471 132.778V134.104C39.0594 137.086 25.284 145.29 15.3803 157.311C5.4766 169.333 0.0609582 184.424 0.0609582 200C0.0609582 215.576 5.4766 230.667 15.3803 242.688C25.284 254.71 39.0594 262.914 54.3471 265.895V267.212C42.4173 269.479 31.328 274.946 22.2654 283.028C13.2027 291.111 6.50753 301.505 2.89594 313.098C-0.71565 324.692 -1.1078 337.049 1.76143 348.849C4.63066 360.648 10.6533 371.446 19.1853 380.087C27.7173 388.727 38.4376 394.886 50.1997 397.905C61.9618 400.923 74.3231 400.688 85.9617 397.224C97.6003 393.759 108.078 387.196 116.275 378.237C124.472 369.277 130.079 358.258 132.496 346.358H134.152C140.443 376.818 167.593 399.962 199.718 399.962C215.171 400.033 230.166 394.722 242.129 384.94C254.091 375.159 262.275 361.517 265.275 346.358H266.93C273.221 376.818 300.371 399.962 332.496 399.962C349.146 399.923 365.184 393.687 377.487 382.469C389.789 371.25 397.475 355.853 399.045 339.278C400.616 322.703 395.959 306.137 385.983 292.807C376.007 279.478 361.425 270.34 345.079 267.174V265.858C360.367 262.876 374.142 254.672 384.046 242.651C393.95 230.629 399.365 215.538 399.365 199.962C399.365 184.387 393.95 169.295 384.046 157.274C374.142 145.252 360.367 137.048 345.079 134.067V132.741C360.479 130.026 374.428 121.968 384.473 109.984C394.518 98.0004 400.016 82.8584 400 67.2214ZM307.613 292.049C307.616 294.094 307.216 296.119 306.436 298.009C305.655 299.899 304.508 301.616 303.062 303.062C301.616 304.508 299.899 305.655 298.009 306.435C296.119 307.216 294.094 307.616 292.049 307.613H108.28C106.235 307.616 104.21 307.216 102.32 306.435C100.43 305.655 98.7127 304.508 97.2667 303.062C95.8207 301.616 94.6744 299.899 93.8936 298.009C93.1127 296.119 92.7127 294.094 92.7164 292.049V108.28C92.7127 106.235 93.1127 104.21 93.8936 102.32C94.6744 100.43 95.8207 98.7126 97.2667 97.2666C98.7127 95.8206 100.43 94.6743 102.32 93.8935C104.21 93.1126 106.235 92.7126 108.28 92.7163H292.049C294.094 92.7126 296.119 93.1126 298.009 93.8935C299.899 94.6743 301.616 95.8206 303.062 97.2666C304.508 98.7126 305.655 100.43 306.436 102.32C307.216 104.21 307.616 106.235 307.613 108.28V292.049Z"
                          fill="#ffffff"
                        />
                      </g>
                      <defs>
                        <clipPath id="clip0_2453_12901">
                          <rect width="400" height="400" fill="white" />
                        </clipPath>
                      </defs>
                    </svg>

                    <div className="callout-heading">Lochie Axon</div>
                    <p className="callout-text">
                      Lochie is a design engineer at Family.
                    </p>
                  </a>
                </NavigationMenu.Link>
              </li>

              <ListItem href="/" title="Mariana Castilho">
                Product designer at poolside, previously Vercel.
              </ListItem>
              <ListItem href="/" title="Henry Heffernan">
                A design engineer at Vercel working on v0.
              </ListItem>
              <ListItem
                href="/"
                title="Dennis Brotzky"
              >
                Co-founder of Fey, engineer who loves design.
              </ListItem>
            </ul>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

        <NavigationMenu.Item>
          <NavigationMenu.Trigger className="trigger">
            Lessons
          </NavigationMenu.Trigger>
          <NavigationMenu.Content className="content">
            <ul className="list two">
              <ListItem
                title="Theory"
                href="/"
              >
                Consists of 4 modules, 24 lessons and 50+ exercises.
              </ListItem>
              <ListItem
                title="Interviews"
                href="/"
              >
                Interviews with experts from companies like Vercel.
              </ListItem>
              <ListItem
                title="Discord"
                href="/"
              >
                Join an exclusive community on all things animation.
              </ListItem>
              <ListItem
                title="Walkthroughs"
                href="/"
              >
                Consists of 3 walkthroughs of high-quality components.
              </ListItem>
              <ListItem title="Vault" href="/">
                A highly curated list of animation resources.
              </ListItem>
              <ListItem
                title="Certificate"
                href="/"
              >
                Get your certificate of completion after finishing 70% of the
                course.
              </ListItem>
            </ul>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

        <NavigationMenu.Item>
          <NavigationMenu.Link
            className="link"
            href="/"
          >
            Account
          </NavigationMenu.Link>
        </NavigationMenu.Item>
      </NavigationMenu.List>

      <div className="viewport-position">
        <NavigationMenu.Viewport className="viewport" />
      </div>
    </NavigationMenu.Root>
);
}

function ListItem({ className, children, title, ...props }) {
return (
  <li>
    <NavigationMenu.Link asChild>
      <a className="list-item-link" {...props}>
        <div className="list-item-heading">{title}</div>
        <p className="list-item-text">{children}</p>
      </a>
    </NavigationMenu.Link>
  </li>
);
}


id: navigation-menu/animating-the-menu/enter-and-exit-animations
lesson_id: navigation-menu/animating-the-menu
module_slug: navigation-menu
module_title: Navigation Menu
lesson_slug: animating-the-menu
lesson_title: Animating the menu
heading: Enter and exit animations
url_path: /lessons/navigation-menu/animating-the-menu/#enter-and-exit-animations
markdown_path: /md/sections/navigation-menu/animating-the-menu/enter-and-exit-animations.md
excerpt:
Let’s now tackle the enter and exit transition when we hover over a trigger. The end result should look like this:

body:
Let’s now tackle the enter and exit transition when we hover over a trigger. The end result should look like this:

import * as NavigationMenu from "@radix-ui/react-navigation-menu";
import "./styles.css";

export default function Orchestration() {
return (
  <NavigationMenu.Root className="root">
      <NavigationMenu.List className="menu-list">
        <NavigationMenu.Item>
          <NavigationMenu.Trigger className="trigger">
            Interviews
          </NavigationMenu.Trigger>
          <NavigationMenu.Content className="content">
            <ul className="list one">
              <li style={{ gridRow: "span 3" }}>
                <NavigationMenu.Link asChild>
                  <a className="callout" href="/">
                    <svg
                      width="24"
                      height="24"
                      viewBox="0 0 400 400"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      className="logo"
                    >
                      <g clipPath="url(#clip0_2453_12901)">
                        <path
                          d="M400 67.2214C399.995 49.482 392.946 32.4706 380.402 19.9269C367.859 7.38321 350.847 0.334041 333.108 0.329055C300.663 -9.31323e-05 273.861 23.1814 267.212 53.6417H265.557C262.472 38.5604 254.283 25.0035 242.369 15.2553C230.456 5.50702 215.546 0.163361 200.153 0.124706C184.759 0.0860515 169.823 5.35476 157.861 15.0431C145.898 24.7314 137.641 38.247 134.481 53.3125H132.826C130.364 41.4247 124.722 30.4276 116.503 21.4935C108.283 12.5593 97.7934 6.02281 86.1515 2.58075C74.5096 -0.861307 62.1519 -1.07995 50.3955 1.94812C38.6392 4.97619 27.9247 11.1375 19.3942 19.7753C10.8637 28.4131 4.83689 39.2038 1.95605 50.9971C-0.924786 62.7904 -0.551646 75.1444 3.0357 86.7423C6.62305 98.3403 13.2902 108.747 22.3264 116.855C31.3627 124.962 42.4294 130.465 54.3471 132.778V134.104C39.0594 137.086 25.284 145.29 15.3803 157.311C5.4766 169.333 0.0609582 184.424 0.0609582 200C0.0609582 215.576 5.4766 230.667 15.3803 242.688C25.284 254.71 39.0594 262.914 54.3471 265.895V267.212C42.4173 269.479 31.328 274.946 22.2654 283.028C13.2027 291.111 6.50753 301.505 2.89594 313.098C-0.71565 324.692 -1.1078 337.049 1.76143 348.849C4.63066 360.648 10.6533 371.446 19.1853 380.087C27.7173 388.727 38.4376 394.886 50.1997 397.905C61.9618 400.923 74.3231 400.688 85.9617 397.224C97.6003 393.759 108.078 387.196 116.275 378.237C124.472 369.277 130.079 358.258 132.496 346.358H134.152C140.443 376.818 167.593 399.962 199.718 399.962C215.171 400.033 230.166 394.722 242.129 384.94C254.091 375.159 262.275 361.517 265.275 346.358H266.93C273.221 376.818 300.371 399.962 332.496 399.962C349.146 399.923 365.184 393.687 377.487 382.469C389.789 371.25 397.475 355.853 399.045 339.278C400.616 322.703 395.959 306.137 385.983 292.807C376.007 279.478 361.425 270.34 345.079 267.174V265.858C360.367 262.876 374.142 254.672 384.046 242.651C393.95 230.629 399.365 215.538 399.365 199.962C399.365 184.387 393.95 169.295 384.046 157.274C374.142 145.252 360.367 137.048 345.079 134.067V132.741C360.479 130.026 374.428 121.968 384.473 109.984C394.518 98.0004 400.016 82.8584 400 67.2214ZM307.613 292.049C307.616 294.094 307.216 296.119 306.436 298.009C305.655 299.899 304.508 301.616 303.062 303.062C301.616 304.508 299.899 305.655 298.009 306.435C296.119 307.216 294.094 307.616 292.049 307.613H108.28C106.235 307.616 104.21 307.216 102.32 306.435C100.43 305.655 98.7127 304.508 97.2667 303.062C95.8207 301.616 94.6744 299.899 93.8936 298.009C93.1127 296.119 92.7127 294.094 92.7164 292.049V108.28C92.7127 106.235 93.1127 104.21 93.8936 102.32C94.6744 100.43 95.8207 98.7126 97.2667 97.2666C98.7127 95.8206 100.43 94.6743 102.32 93.8935C104.21 93.1126 106.235 92.7126 108.28 92.7163H292.049C294.094 92.7126 296.119 93.1126 298.009 93.8935C299.899 94.6743 301.616 95.8206 303.062 97.2666C304.508 98.7126 305.655 100.43 306.436 102.32C307.216 104.21 307.616 106.235 307.613 108.28V292.049Z"
                          fill="#ffffff"
                        />
                      </g>
                      <defs>
                        <clipPath id="clip0_2453_12901">
                          <rect width="400" height="400" fill="white" />
                        </clipPath>
                      </defs>
                    </svg>

                    <div className="callout-heading">Lochie Axon</div>
                    <p className="callout-text">
                      Lochie is a design engineer at Family.
                    </p>
                  </a>
                </NavigationMenu.Link>
              </li>

              <ListItem href="/" title="Mariana Castilho">
                Product designer at poolside, previously Vercel.
              </ListItem>
              <ListItem href="/" title="Henry Heffernan">
                A design engineer at Vercel working on v0.
              </ListItem>
              <ListItem
                href="/"
                title="Dennis Brotzky"
              >
                Co-founder of Fey, engineer who loves design.
              </ListItem>
            </ul>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

        <NavigationMenu.Item>
          <NavigationMenu.Trigger className="trigger">
            Lessons
          </NavigationMenu.Trigger>
          <NavigationMenu.Content className="content">
            <ul className="list two">
              <ListItem
                title="Theory"
                href="/"
              >
                Consists of 4 modules, 24 lessons and 50+ exercises.
              </ListItem>
              <ListItem
                title="Interviews"
                href="/"
              >
                Interviews with experts from companies like Vercel.
              </ListItem>
              <ListItem
                title="Discord"
                href="/"
              >
                Join an exclusive community on all things animation.
              </ListItem>
              <ListItem
                title="Walkthroughs"
                href="/"
              >
                Consists of 3 walkthroughs of high-quality components.
              </ListItem>
              <ListItem title="Vault" href="/">
                A highly curated list of animation resources.
              </ListItem>
              <ListItem
                title="Certificate"
                href="/"
              >
                Get your certificate of completion after finishing 70% of the
                course.
              </ListItem>
            </ul>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

        <NavigationMenu.Item>
          <NavigationMenu.Link
            className="link"
            href="/"
          >
            Account
          </NavigationMenu.Link>
        </NavigationMenu.Item>
      </NavigationMenu.List>

      <div className="viewport-position">
        <NavigationMenu.Viewport className="viewport" />
      </div>
    </NavigationMenu.Root>
);
}

function ListItem({ className, children, title, ...props }) {
return (
  <li>
    <NavigationMenu.Link asChild>
      <a className="list-item-link" {...props}>
        <div className="list-item-heading">{title}</div>
        <p className="list-item-text">{children}</p>
      </a>
    </NavigationMenu.Link>
  </li>
);
}


id: navigation-menu/animating-the-menu/switching-between-menus
lesson_id: navigation-menu/animating-the-menu
module_slug: navigation-menu
module_title: Navigation Menu
lesson_slug: animating-the-menu
lesson_title: Animating the menu
heading: Switching between menus
url_path: /lessons/navigation-menu/animating-the-menu/#switching-between-menus
markdown_path: /md/sections/navigation-menu/animating-the-menu/switching-between-menus.md
excerpt:
The last animation we’ll add is the open that happens when you hover over another trigger while the menu is open. The old content fades out while the new one fades in from the other side. This is how the end result should look like:

body:
The last animation we’ll add is the open that happens when you hover over another trigger while the menu is open. The old content fades out while the new one fades in from the other side. This is how the end result should look like:

Other than the animation itself, there’s one detail to it. We’ll cover it in the solution, but if you are curious, play with the demo above and see whether you can figure it out.

import * as NavigationMenu from "@radix-ui/react-navigation-menu";
import "./styles.css";

export default function Orchestration() {
return (
  <NavigationMenu.Root className="root">
      <NavigationMenu.List className="menu-list">
        <NavigationMenu.Item>
          <NavigationMenu.Trigger className="trigger">
            Interviews
          </NavigationMenu.Trigger>
          <NavigationMenu.Content className="content">
            <ul className="list one">
              <li style={{ gridRow: "span 3" }}>
                <NavigationMenu.Link asChild>
                  <a className="callout" href="/">
                    <svg
                      width="24"
                      height="24"
                      viewBox="0 0 400 400"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      className="logo"
                    >
                      <g clipPath="url(#clip0_2453_12901)">
                        <path
                          d="M400 67.2214C399.995 49.482 392.946 32.4706 380.402 19.9269C367.859 7.38321 350.847 0.334041 333.108 0.329055C300.663 -9.31323e-05 273.861 23.1814 267.212 53.6417H265.557C262.472 38.5604 254.283 25.0035 242.369 15.2553C230.456 5.50702 215.546 0.163361 200.153 0.124706C184.759 0.0860515 169.823 5.35476 157.861 15.0431C145.898 24.7314 137.641 38.247 134.481 53.3125H132.826C130.364 41.4247 124.722 30.4276 116.503 21.4935C108.283 12.5593 97.7934 6.02281 86.1515 2.58075C74.5096 -0.861307 62.1519 -1.07995 50.3955 1.94812C38.6392 4.97619 27.9247 11.1375 19.3942 19.7753C10.8637 28.4131 4.83689 39.2038 1.95605 50.9971C-0.924786 62.7904 -0.551646 75.1444 3.0357 86.7423C6.62305 98.3403 13.2902 108.747 22.3264 116.855C31.3627 124.962 42.4294 130.465 54.3471 132.778V134.104C39.0594 137.086 25.284 145.29 15.3803 157.311C5.4766 169.333 0.0609582 184.424 0.0609582 200C0.0609582 215.576 5.4766 230.667 15.3803 242.688C25.284 254.71 39.0594 262.914 54.3471 265.895V267.212C42.4173 269.479 31.328 274.946 22.2654 283.028C13.2027 291.111 6.50753 301.505 2.89594 313.098C-0.71565 324.692 -1.1078 337.049 1.76143 348.849C4.63066 360.648 10.6533 371.446 19.1853 380.087C27.7173 388.727 38.4376 394.886 50.1997 397.905C61.9618 400.923 74.3231 400.688 85.9617 397.224C97.6003 393.759 108.078 387.196 116.275 378.237C124.472 369.277 130.079 358.258 132.496 346.358H134.152C140.443 376.818 167.593 399.962 199.718 399.962C215.171 400.033 230.166 394.722 242.129 384.94C254.091 375.159 262.275 361.517 265.275 346.358H266.93C273.221 376.818 300.371 399.962 332.496 399.962C349.146 399.923 365.184 393.687 377.487 382.469C389.789 371.25 397.475 355.853 399.045 339.278C400.616 322.703 395.959 306.137 385.983 292.807C376.007 279.478 361.425 270.34 345.079 267.174V265.858C360.367 262.876 374.142 254.672 384.046 242.651C393.95 230.629 399.365 215.538 399.365 199.962C399.365 184.387 393.95 169.295 384.046 157.274C374.142 145.252 360.367 137.048 345.079 134.067V132.741C360.479 130.026 374.428 121.968 384.473 109.984C394.518 98.0004 400.016 82.8584 400 67.2214ZM307.613 292.049C307.616 294.094 307.216 296.119 306.436 298.009C305.655 299.899 304.508 301.616 303.062 303.062C301.616 304.508 299.899 305.655 298.009 306.435C296.119 307.216 294.094 307.616 292.049 307.613H108.28C106.235 307.616 104.21 307.216 102.32 306.435C100.43 305.655 98.7127 304.508 97.2667 303.062C95.8207 301.616 94.6744 299.899 93.8936 298.009C93.1127 296.119 92.7127 294.094 92.7164 292.049V108.28C92.7127 106.235 93.1127 104.21 93.8936 102.32C94.6744 100.43 95.8207 98.7126 97.2667 97.2666C98.7127 95.8206 100.43 94.6743 102.32 93.8935C104.21 93.1126 106.235 92.7126 108.28 92.7163H292.049C294.094 92.7126 296.119 93.1126 298.009 93.8935C299.899 94.6743 301.616 95.8206 303.062 97.2666C304.508 98.7126 305.655 100.43 306.436 102.32C307.216 104.21 307.616 106.235 307.613 108.28V292.049Z"
                          fill="#ffffff"
                        />
                      </g>
                      <defs>
                        <clipPath id="clip0_2453_12901">
                          <rect width="400" height="400" fill="white" />
                        </clipPath>
                      </defs>
                    </svg>

                    <div className="callout-heading">Lochie Axon</div>
                    <p className="callout-text">
                      Lochie is a design engineer at Family.
                    </p>
                  </a>
                </NavigationMenu.Link>
              </li>

              <ListItem href="/" title="Mariana Castilho">
                Product designer at poolside, previously Vercel.
              </ListItem>
              <ListItem href="/" title="Henry Heffernan">
                A design engineer at Vercel working on v0.
              </ListItem>
              <ListItem
                href="/"
                title="Dennis Brotzky"
              >
                Co-founder of Fey, engineer who loves design.
              </ListItem>
            </ul>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

        <NavigationMenu.Item>
          <NavigationMenu.Trigger className="trigger">
            Lessons
          </NavigationMenu.Trigger>
          <NavigationMenu.Content className="content">
            <ul className="list two">
              <ListItem
                title="Theory"
                href="/"
              >
                Consists of 4 modules, 24 lessons and 50+ exercises.
              </ListItem>
              <ListItem
                title="Interviews"
                href="/"
              >
                Interviews with experts from companies like Vercel.
              </ListItem>
              <ListItem
                title="Discord"
                href="/"
              >
                Join an exclusive community on all things animation.
              </ListItem>
              <ListItem
                title="Walkthroughs"
                href="/"
              >
                Consists of 3 walkthroughs of high-quality components.
              </ListItem>
              <ListItem title="Vault" href="/">
                A highly curated list of animation resources.
              </ListItem>
              <ListItem
                title="Certificate"
                href="/"
              >
                Get your certificate of completion after finishing 70% of the
                course.
              </ListItem>
            </ul>
          </NavigationMenu.Content>
        </NavigationMenu.Item>

        <NavigationMenu.Item>
          <NavigationMenu.Link
            className="link"
            href="/"
          >
            Account
          </NavigationMenu.Link>
        </NavigationMenu.Item>
      </NavigationMenu.List>

      <div className="viewport-position">
        <NavigationMenu.Viewport className="viewport" />
      </div>
    </NavigationMenu.Root>
);
}

function ListItem({ className, children, title, ...props }) {
return (
  <li>
    <NavigationMenu.Link asChild>
      <a className="list-item-link" {...props}>
        <div className="list-item-heading">{title}</div>
        <p className="list-item-text">{children}</p>
      </a>
    </NavigationMenu.Link>
  </li>
);
}


id: navigation-menu/animating-the-menu/why-use-a-library-for-this
lesson_id: navigation-menu/animating-the-menu
module_slug: navigation-menu
module_title: Navigation Menu
lesson_slug: animating-the-menu
lesson_title: Animating the menu
heading: Why use a library for this?
url_path: /lessons/navigation-menu/animating-the-menu/#why-use-a-library-for-this
markdown_path: /md/sections/navigation-menu/animating-the-menu/why-use-a-library-for-this.md
excerpt:
Most of the code in the exercises above is copied from Radix’s documentation. You might think, "Isn’t this course supposed to teach me how to build things from scratch?". Yes, sometimes.

body:
Most of the code in the exercises above is copied from Radix’s documentation. You might think, "Isn’t this course supposed to teach me how to build things from scratch?". Yes, sometimes.

This walkthrough is not so much about teaching you the technical details of implementing Radix’s navigation menu, but rather about showing you how I would approach building such component in a real world scenario. I’ve done this at Vercel and Linear, and I know that I would built it in the same way now.

Your users won’t see your code. They won’t see the difference between you spending 20 hours on a component vs using an existing solution, as long as an existing solution is of high quality. When I know that using an existing component will save me time, make the code more readble and maintanable, and leave me with a better end result, I’ll use it. And I think you should do the same.


id: navigation-menu/closing-thoughts/reduced-motion
lesson_id: navigation-menu/closing-thoughts
module_slug: navigation-menu
module_title: Navigation Menu
lesson_slug: closing-thoughts
lesson_title: Closing thoughts
heading: Reduced motion
url_path: /lessons/navigation-menu/closing-thoughts/#reduced-motion
markdown_path: /md/sections/navigation-menu/closing-thoughts/reduced-motion.md
excerpt:
Remember when we talked about accessibility? We talked about how animations can make people feel sick. This is one of those animations, because there’s a lot happening at once.

body:
Remember when we talked about accessibility? We talked about how animations can make people feel sick. This is one of those animations, because there’s a lot happening at once.

To disable motion for people that prefer reduced motion we need to remove animations within a media query:

@media (prefers-reduced-motion: reduce) {
  .viewport,
  .content {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .viewport,
  .content {
    animation: none !important;
  }
}

This is a pretty quick fix, but you should ask this question yourself with each animation. Should we disable animations for people that prefer reduced motion? Don’t forget it, people appreciate it!


id: navigation-menu/closing-thoughts/should-you-still-use-radix
lesson_id: navigation-menu/closing-thoughts
module_slug: navigation-menu
module_title: Navigation Menu
lesson_slug: closing-thoughts
lesson_title: Closing thoughts
heading: Should you still use Radix?
url_path: /lessons/navigation-menu/closing-thoughts/#should-you-still-use-radix
markdown_path: /md/sections/navigation-menu/closing-thoughts/should-you-still-use-radix.md
excerpt:
Radix is not as maintained as it used to be, and there are great alternatives these days like React Aria or Base UI. While Base UI is the shiny, new thing, Radix is mature and battle-tested. Also, code doesn’t stop working just because it’s not maintained.

body:
Radix is not as maintained as it used to be, and there are great alternatives these days like React Aria or Base UI. While Base UI is the shiny, new thing, Radix is mature and battle-tested. Also, code doesn’t stop working just because it’s not maintained.

Again, you should carefully consider all the options and choose the one that makes the most sense for you. For me, it’s Radix at the moment. I haven’t ran into any big issues with it, and in the worst case, you can always patch an issue or fork the library.

The good news here is that Radix and Base UI implementations are very similar. If you want to refactor this component to use Base UI, you’ll only have to change a few CSS variables and data attributes. Less than 5 minutes of work.


id: navigation-menu/closing-thoughts/trusting-the-hype
lesson_id: navigation-menu/closing-thoughts
module_slug: navigation-menu
module_title: Navigation Menu
lesson_slug: closing-thoughts
lesson_title: Closing thoughts
heading: Trusting the hype
url_path: /lessons/navigation-menu/closing-thoughts/#trusting-the-hype
markdown_path: /md/sections/navigation-menu/closing-thoughts/trusting-the-hype.md
excerpt:
When I was starting out Stitches was the hot new thing. Everyone thought it’s the future of styling so I decided to use it at a company I was working at. It was great... for a few months. At some point the Stitches team has moved on to other projects and it wasn’t maintained anymore.

body:
When I was starting out Stitches was the hot new thing. Everyone thought it’s the future of styling so I decided to use it at a company I was working at. It was great... for a few months. At some point the Stitches team has moved on to other projects and it wasn’t maintained anymore.

I made a mistake. I wanted to use the new shiny thing, because people in the community were impressed by it at that moment.

Don’t chase the new shiny thing like I did. Think about the pros and cons and carefully consider all the options.

Maybe Base UI will be the best thing that happened to the web, maybe it will be unmaintained in a year. I don’t know that. What I do know is that Radix solves a problem that I have and it won’t break because of lack of commits.

To be clear, I am aware of Radix’s issues. I just don’t consider them big enough to make me switch to Base UI at this moment. With that being said, I want Base UI to succeed. The web deserves great primitives.


id: navigation-menu/know-your-tools/overview
lesson_id: navigation-menu/know-your-tools
module_slug: navigation-menu
module_title: Navigation Menu
lesson_slug: know-your-tools
lesson_title: Know your tools
heading: Overview
url_path: /lessons/navigation-menu/know-your-tools/#overview
markdown_path: /md/sections/navigation-menu/know-your-tools/overview.md
excerpt:
Let’s assume we work on the marketing team at a company and we are tasked with creating a navigation menu with multiple dropdowns. How would should we go about this?

body:
Let’s assume we work on the marketing team at a company and we are tasked with creating a navigation menu with multiple dropdowns. How would should we go about this?

What I usually do in such cases, is go and look how other companies do it. I actually created a navigation menu before, and what I did before I built it is I looked at how other companies do it and decided to build something similar to Stripe’s.

This was my inspiration for Vercel’s navigation menu.

This is how I usually work. Nothing is done in isolation, I get inspired by other products. Most of the time, you shouldn’t try to invent a new patterns, but rather use existing ones, because they are battle tested and proven to work.

This is especially useful early-on in your animation journey when you don’t have the intuition yet. Look at great products and companies, see how they do things, and then try to create something inspired by that. Steal like an artist.


id: navigation-menu/know-your-tools/knowing-what-to-use
lesson_id: navigation-menu/know-your-tools
module_slug: navigation-menu
module_title: Navigation Menu
lesson_slug: know-your-tools
lesson_title: Know your tools
heading: Knowing what to use
url_path: /lessons/navigation-menu/know-your-tools/#knowing-what-to-use
markdown_path: /md/sections/navigation-menu/know-your-tools/knowing-what-to-use.md
excerpt:
A menu like this is actually quite a complex component. Keyboard navigation, accessibility, correct focus management, are all things that we need to get right. While we could do all of this from scratch, we can also look at existing solutions like Radix’s primitives or Base UI.

body:
A menu like this is actually quite a complex component. Keyboard navigation, accessibility, correct focus management, are all things that we need to get right. While we could do all of this from scratch, we can also look at existing solutions like Radix’s primitives or Base UI.

Making a dropdown accessible is actually quite challenging, same goes for a custom select component or a toast. Components like Radix’s primitives offer all that accessibility out of the box, but at the same time, they are unstyled which gives us a lot of freedom. These libraries essentially do the "boring" work for us.

When I was working on Vercel’s design system I used Radix’s primitives as the base for lots of components, because it saved me a lot of time, but also because the developer experience of these components is great. I also used it recently for Linear’s navigation:

Linear’s navigation menu.

Radix also happens to have a navigation menu component, which is exactly what we need. This is the importance of knowing your tools. Don’t blindly jump into code straight away. Look around, see what’s out there, what libraries or components could make your life easier.

Radix makes animating the navigation menu easy as well, which is another reason why it makes sense to use it. It exposes data attributes like data-motion which will even allow us to ensure that the animation is direction aware.


id: navigation-menu/know-your-tools/when-to-use-a-3rd-party-dependency
lesson_id: navigation-menu/know-your-tools
module_slug: navigation-menu
module_title: Navigation Menu
lesson_slug: know-your-tools
lesson_title: Know your tools
heading: When to use a 3rd party dependency
url_path: /lessons/navigation-menu/know-your-tools/#when-to-use-a-3rd-party-dependency
markdown_path: /md/sections/navigation-menu/know-your-tools/when-to-use-a-3rd-party-dependency.md
excerpt:
You should obviously carefully consider whether a 3rd party dependency is worth it. But for something like a navigation menu, you have to consider that it would take you a lot of time to get this right. Someone has spent weeks working on such component already. Not only will it save you time, but the quality of the component will also be hard to beat.

body:
You should obviously carefully consider whether a 3rd party dependency is worth it. But for something like a navigation menu, you have to consider that it would take you a lot of time to get this right. Someone has spent weeks working on such component already. Not only will it save you time, but the quality of the component will also be hard to beat.

Radix’s navigation menu component.

It’s also used by many amazing companies and individuals (shadcn) in the industry, which reaffirms the quality of the component and encourages me to use it.


id: resources/easing-curves/overview
lesson_id: resources/easing-curves
module_slug: resources
module_title: Resources
lesson_slug: easing-curves
lesson_title: animations.dev
heading: Overview
url_path: /lessons/resources/easing-curves/#overview
markdown_path: /md/sections/resources/easing-curves/overview.md
excerpt:
These custom curves are made by Benjamin De Cock. I use these often if a built-in easing curve is not strong enough. We also use them at Linear.

body:
Intro What makes an animation feel right The Easing Blueprint Spring animations Timing and purpose Taste Animations and AIUpdated Practical Animation Tips

The beauty of CSS animations Transforms Transitions Keyframe Animations The Magic of Clip Path

Why Framer Motion The Basics How do I code animations Feedback popover Multi-step component Trash interaction Hooks and animations Interactive graph Animating in public

The big little details Performance Accessibility Animations of the future

These custom curves are made by Benjamin De Cock. I use these often if a built-in easing curve is not strong enough. We also use them at Linear.

The names of these variables refer to different mathematical functions used to define them.

:root {
  --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
  --ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
  --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
  --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
  --ease-in-circ: cubic-bezier(.6, .04, .98, .335);

  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-out-circ: cubic-bezier(.075, .82, .165, 1);

  --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
  --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
}

:root {
  --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
  --ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
  --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
  --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
  --ease-in-circ: cubic-bezier(.6, .04, .98, .335);

  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-out-circ: cubic-bezier(.075, .82, .165, 1);

  --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
  --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
}


id: resources/emil-skill/note
lesson_id: resources/emil-skill
module_slug: resources
module_title: Resources
lesson_slug: emil-skill
lesson_title: animations.dev
heading: Note
excerpt: This is what I wish I had when I was starting out as a design engineer.
url_path: /lessons/resources/emil-skill/#note
markdown_path: /md/sections/resources/emil-skill/note.md
body:
This is what I wish I had when I was starting out as a design engineer.

It contains everything I’ve learned from working at companies like Vercel and Linear, and building open source libraries like Sonner and Vaul.

For animations.dev students only.

“Just got my hands on Emil’s skill file, it is gold. His course was already good, but this contains so much more information and things you normally need to think of.”


id: resources/emil-skill/what-s-inside
lesson_id: resources/emil-skill
module_slug: resources
module_title: Resources
lesson_slug: emil-skill
lesson_title: animations.dev
heading: What’s inside
url_path: /lessons/resources/emil-skill/#what-s-inside
markdown_path: /md/sections/resources/emil-skill/what-s-inside.md
excerpt:
In addition to the animation skill that you get completely for free in Animations and AI lesson, this skill also contains separate files on:

body:
In addition to the animation skill that you get completely for free in Animations and AI lesson, this skill also contains separate files on:

┌───────────────────────┬─────────────────────────────────────────────────────────┐
│ Category              │ Covers                                                  │
├───────────────────────┼─────────────────────────────────────────────────────────┤
│ UI Polish             │ Typography, shadows, gradients, layout, dark mode       │
├───────────────────────┼─────────────────────────────────────────────────────────┤
│ Forms & Controls      │ Inputs, buttons, form patterns, validation              │
├───────────────────────┼─────────────────────────────────────────────────────────┤
│ Touch & Accessibility │ Touch devices, keyboard nav, a11y, tap targets          │
├───────────────────────┼─────────────────────────────────────────────────────────┤
│ Component Design      │ Compound components, composition, customizability       │
├───────────────────────┼─────────────────────────────────────────────────────────┤
│ Marketing             │ Landing pages, blogs, docs, changelogs                  │
├───────────────────────┼─────────────────────────────────────────────────────────┤
│ Performance           │ Virtualization, preloading, optimization                │
└───────────────────────┴─────────────────────────────────────────────────────────┘

More categories coming soon.

Some of the things mentioned in these files won’t be new to you, but there are also bits that I’ve never shared before and are exclusive for this skill. Here are a few of them:

## Eased Gradients

Use eased gradients over linear gradients when using solid colors. Linear gradients have visible banding; eased gradients are smoother.

.gradient {
  background: linear-gradient(to bottom, hsl(330, 100%, 45.1%) 0%, hsl(331, 89.25%, 47.36%) 8.1%, hsl(330.53, 79.69%, 48.96%) 15.5%, hsl(328.56, 70.89%, 49.96%) 22.5%, hsl(324.94, 63.52%, 50.4%) 29%, hsl(319.21, 54.99%, 50.3%) 35.3%, hsl(310.39, 46.14%, 49.68%) 41.2%, hsl(296.53, 39.12%, 49.7%) 47.1%, hsl(280.63, 42.91%, 53.43%) 52.9%, hsl(265.14, 47.59%, 56.84%) 58.8%, hsl(250.13, 52.52%, 59.88%) 64.7%, hsl(235.88, 59.2%, 60.91%) 71%, hsl(225.81, 68.23%, 57.85%) 77.5%, hsl(218.93, 74.97%, 54.21%) 84.5%, hsl(213.89, 79.63%, 49.97%) 91.9%, hsl(210, 100%, 45.1%) 100%);
}

.gradient {
  background: linear-gradient(to bottom, hsl(330, 100%, 45.1%) 0%, hsl(331, 89.25%, 47.36%) 8.1%, hsl(330.53, 79.69%, 48.96%) 15.5%, hsl(328.56, 70.89%, 49.96%) 22.5%, hsl(324.94, 63.52%, 50.4%) 29%, hsl(319.21, 54.99%, 50.3%) 35.3%, hsl(310.39, 46.14%, 49.68%) 41.2%, hsl(296.53, 39.12%, 49.7%) 47.1%, hsl(280.63, 42.91%, 53.43%) 52.9%, hsl(265.14, 47.59%, 56.84%) 58.8%, hsl(250.13, 52.52%, 59.88%) 64.7%, hsl(235.88, 59.2%, 60.91%) 71%, hsl(225.81, 68.23%, 57.85%) 77.5%, hsl(218.93, 74.97%, 54.21%) 84.5%, hsl(213.89, 79.63%, 49.97%) 91.9%, hsl(210, 100%, 45.1%) 100%);
}

This skill is not finished. Just like I kept my word and the course has been receiving consistent updates since the initial release, this skill will also be updated based on new learnings, feedback, past experiences, and new developments in the AI world.

“The Emil Design Engineering skill is really impressive. I just used it to help me build an infinite scroll behavior on a table and it gave me some really nice recommendations . I even used it outside of its main goal to make my Obsidian custom theme better. It's really one of my favorite skills out there favorite skills out there”

You pay once, and get lifetime access to all updates. It’s an early access price for those that want to try it out and help me make it better. The price will only go up in the future.


