Interviews/Lochie Axon

Overview

• Henry Heffernan
• Mariana Castilho
• Lochie Axon
• Dennis Brotzky

Lochie is a design engineer working at Avara. He built the Family site, and docs, ConnectKit, Avara’s site, and many other great things. In this conversation we’ll how Lochie got into design engineering, how he thinks about animations, and how he builds them.

Lochie (00:00)

I started like with animation in particular, I started in school with like flip books, that’s like, I’ve always loved animation. And even before that, I had my dad’s. camcorder, and I would make stop motion with it.

We had to stop start the recording constantly, and I had little toys that I would animate around. So I’ve always been into animation in general, but my first experience with coding animation was, again, as a kid we had a computer. And I found, I don’t know what the software is called, but it’s a turtle that you can animate on the screen with code.

And that’s all you could do. Just draw. You can tell it to go north 30 pixels, south 40 pixels, and it’ll go up and down. And that just. Piqued my interest so much, but then nothing, there was no development for a good, like five or six years until I learned about Macromedia Flash and then that I would have been a teenager at that point.

And then, yeah, just started learning that and learning how to animate in that 2D software and then found out you can code in there as well. So that brought all that around. I went back to coding again, and then I started making some flash games and started posting them on newgrounds. com and did pretty well there for, especially for the eight.

Like I was, I would have been 15 when I posted my first like video game that I made. And then I started getting sponsorships for them and started generating some income and that was, that would have been. At the peak of like Flash games era. And then when I turned 18, I started applying for jobs, but that’s the exact same time I started applying for jobs using Flash, but that’s the exact same time when Flash started dying out.

With the whole Flash is dead thing where Steve Jobs just didn’t want, like he did a whole press release about not wanting Adobe Flash at that point. Flash Player doesn’t, he didn’t want that to exist anymore. It was pretty crazy to think this guy just kind of shut down his whole product. But yeah, so I had to pivot from Flash to HTML5.

Because that just started becoming a thing. This is a good 15 years ago now. 2000 and, yeah, 2010. So, yeah, so I had to pivot to HTML5 and learn but there was no CSS 3 animation sort of stuff yet, like anything that worked across browsers, so I had to do everything with JavaScript and jQuery only did a little bit of that sort of stuff that I wanted to achieve.

So I just started writing my own libraries and then I started working for agencies who saw my work. I did some smaller stuff and then I kept moving into banner ads and started making banner ads where I broke my own library because GreenSock was too heavy at the time because you could only fit a banner ad in 40 kilobytes.

So the GreenSock library was 8 kilobytes and that used up too much space. In my eyes, cause I wanted a high quality images. So instead I wrote my own managed to get down to zero 0. 4 kilobytes for just a really basic light version of it. Cause that’s all you really needed for that sort of stuff. And yeah, just managed to produce high quality banner ads, even though no one wants to see them.

I don’t think many people cared if they were high quality or not. So it was a bit disappointing to put all that effort. Into something that people didn’t want to see and then I’ve just basically been trying to chase a way to get out of that So then at some point I moved back to Video games and I started doing Mobile games in doing like triple a mobile games, and I just wasn’t a fan I thought going back to video games would have been great, but just wasn’t for me too much politics involved In that it just didn’t feel like it didn’t feel like they were trying to create a product.

It felt like more, they were just trying to make something that would generate as much revenue as possible rather than something that was as high quality as possible, which in turn would generate revenue. But yeah, so it just, it felt like a little bit of a, just what you assume, like the mobile game hype would have been a good.

just like everyone just trying to make as much stuff as they could. So I jumped out of that, couldn’t do that anymore. And then went back to some agency work. And then started posting some stuff on Twitter. Met a few people that were in, in the sort of startup industry and just had a few people shout my name out and then managed to find my way to meet Benji.

And then started working at family. It was a really, and it was like a good 10 years of not quite finding what I wanted. And then finally finding this sort of location, this sort of industry where they actually care about what you make and how you make it. And. Just all the user experience stuff behind it as well.

Just making sure that people enjoy what they’re actually using It’s like I love this sort of stuff way better than anything else.

Emil (05:25)

Basically you got your job through Twitter or because you said you started posting and stuff

Lochie (05:34)

Essentially, I got my work through Twitter. There was a few other things Associated to that because there was a couple of the other that came from people posting on Twitter.

So I would go join them and join those little social networks that were coming out. Like little apps. One was called, I don’t know if you recall, it was called screen wall. It kind of shut down a few years ago.

Emil (05:57)

I might be too, too young for that. Maybe.

Lochie (06:01)

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.

Emil (07:09)

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?

Lochie (07:32)

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.

Emil (08:51)

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

Lochie (08:58)

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.

Emil (09:27)

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.

Lochie (09:52)

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.

Emil (12:57)

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?

Lochie (13:19)

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.

Emil (15:07)

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.

Lochie (15:38)

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.

Emil (17:49)

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.

Lochie (18:00)

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.

Emil (18:41)

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

Lochie (19:14)

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.

Emil (21:46)

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?

Lochie (22:00)

Yeah. It’s just one big SVG illustration.

Emil (22:03)

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

Lochie (22:16)

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.

Emil (23:05)

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?

Lochie (23:13)

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.

Emil (25:44)

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?

Lochie (26:13)

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.

Emil (27:33)

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.

Lochie (27:45)

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.

Emil (28:14)

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?

Lochie (28:28)

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.

Emil (29:14)

Think you, you should share more, but

Lochie (29:18)

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.

Emil (29:51)

Anything else about

Lochie (29:52)

sharing some more stuff? I’ll start sharing some stuff.

Emil (29:56)

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

Lochie (30:14)

or just in general?

Emil (30:15)

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.

Lochie (30:27)

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.

Emil (34:38)

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?

Lochie (35:01)

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,

Emil (37:27)

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?

Lochie (37:48)

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?

Emil (39:11)

Yeah. Yeah.

Lochie (39:12)

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.

Emil (39:32)

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

Lochie (39:53)

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.

Emil (44:09)

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?

Lochie (44:22)

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

Emil (46:35)

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

Lochie (46:46)

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.

Emil (47:20)

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.

Lochie (47:41)

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.

Emil (48:13)

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.

Lochie (48:30)

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.

Emil (49:44)

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.

Lochie (50:15)

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

Emil (55:16)

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.

Lochie (55:33)

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?

Emil (56:50)

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.

Lochie (57:18)

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.

Emil (58:59)

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?

Lochie (59:09)

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.

Emil (59:42)

All right.

Lochie (59:42)

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.

Interview notes

• Lochie’s Twitter
• Family
• easing.dev
• Avara