Twitter Space: Motion Scape

Notes based on Stefan's companion blog post

Kindly share and like this to support us and the project:

• Release tweet
• Github repository
  • Star the repo, it allows us to work on it
• LinkedIn post about release
• Mac App Store Link

The starting point?

1. Amos created tutorials around animations
   • Spring animation tutorial
   • Problem: How to test animation easing before using them in SwiftUI
   • Solutions for web:
     • https://easings.net/
     • https://cubic-bezier.com/
2. Stefan created a little example with some controls that set parameters

How did we approach it?

1. Open-source
2. Start with the bare minimum
3. Include a few examples, add parameters to play around within a very simple UI
4. Amos created most of the animations
5. Stefan created the skeleton of the Mac app
6. Tested by people from our team (via TestFlight)
7. Similar app got released: Couverture

Future plans?

1. Move process to Github
2. See what people would like/contribute
3. More animation examples
4. Improve UX (Example: Timing curves - the ability to adjust control points with the control handles of the graph)

Listener Requested Links

• SwiftUI Animation Links
  • SwiftUI Animation on Udemy
  • Book (old buy mighty)
  • Mark’s SwiftUI animations book
  • Learn Core Animation with Kite
  • 100 Days of SwiftUI (Day 32 - 34)
  • SwiftUILab
• SwiftUI Animation Inspiration
  • Stream SwiftUI Spring animations
  • S

Runway
Put your mobile releases on autopilot and keep the whole team in sync throughout. More info on runway.team

Lead Software Developer 
Learn best practices for being a great lead software developer.

Transcript

Jeroen Leenarts: 0:45

Hi Leenarts Here. So this is the Twitter space about motion Skype. I'm not an active participant on this Twitter space, but I did want to share it with you because I think it's a really cool project that the three of us worked on in some capacity. Mostly, my role was in cheering Stefan, and Amos on about the work that we're doing on motion scape and all the underlying work that needed to happen. I'm very proud of what they produced. I'm very happy with what I produced. And I hope you will enjoy the little product that you created as well. It's available open source, and on the Mac App Store. So definitely have a look at those, the links are in the show notes. Yeah, I was out enjoying King's Day, on the Wednesday after recording of this Twitter space. So I was unavailable. I was just enjoying a public holiday in the Netherlands, with my family, we went outside, had a nice drink, went to the carnival, very enjoyable, we had nice weather. And I knew that mo Stefan worth taking care of this Twitter space while I was off. And I hope you enjoyed listening to this one, just as much as I did when I got recording from Stefan.

Stefan Blos: 1:49

So welcome everybody to today's Twitter space. And today's I was coffee chat, which is basically the wrong name for today's chat, because we'll be talking about Mac OS Monday. And we'll be talking about the app we launched on Monday, which is called motion scape. I shared both the tweet to the release the tree to the repository of the app in the space, so you can have a look at those. Basically, we created an application to prototype and play with animations and swift UI and have a chance to directly export those to code. We want to talk a little bit about how we came up with the idea today. We approach the entire project, what our thoughts are like and and how the entire development and release process looks like. And then also we will talk a little bit about what our plans are with the project. And what will how are we we will approach going forward with that. And if there's any questions from any of you, then always feel free to to request the microphone and just ask those and we're very happy to answer them and talk about that. So should we start a massage

Amos Gyamfi: 3:18

already? Yeah, we can start. So very cool. Let's begin with the starting point. So over the past years, I have been creating a lot of animations around swift UI. And then the idea for this app mainly came from the time when I created spring animation. And then I wanted to make a tutorial about it for stream Developers YouTube channel, we will also put a link to that and in one of you can just check it after. So I created the animation and also wanted to make a video about it. And mostly, whenever I create swift UI animations, the problem I normally face is, I don't have any way to visualize the results before I normally use them in the actual swift UI animation. And what I do most of the time is to go to the website isn't a dotnet. It has a collection of CSS timing curves, which you can also copy the control points and use in Swift UI animation as well. And then there is another website called cubic bezier.com. So I normally just visualize an animation using this to a website, and then get the control points for my swift UI animations. But there is nothing wrong with this to our website. But the problem is, if you want to maybe play around with animation speed, and also the duration of the animation, or, for example, if you are working with spring animation, you may want to know how changing the stiffness or the mass affect the animation. You cannot do this with this website. So after creating the animation I made the second example. It is also included in the app. So you can just check it. I created the animation in Swift UI and then posted on Twitter. It got about 400 likes, and then Stefan saw the animation. And then he thought it will be cool if we make an app so that we can just prototype this kind of eases and the spring parameters before we use them in actual swift UI animation. So I I was also thinking about the sentence. So I thought like, oh, it would be great. Like if we were able to just work together on this app. And then we got the go ahead from stream, and then we started to work with it. Yeah, yeah.

Stefan Blos: 6:02

What you mentioned there is, I think, pretty interesting, because, and I mean, this is not like, this wasn't like a very novel approach or a novel idea we had. Yeah, it was just like, things like these exist for the web. And you can you can play around with them. And the the website that I must mentioned, like leasing standard cubic bezier.com, they allow you to play around with the CSS animations. So it's not like a very new idea. But I think it's something that was lacking in the, in our space or in the iOS MacOS world. And I think that's, that's what basically sparked our interest in that, right. I think that's, that was the point where we both thought, it's really, it's really something that both of us would like to use, because it's always fun to play around there. And to get like the, the correct or the like, the ideal way of setting the parameters so that the final outcome looks looks nice. And yeah, from that, we thought, hey, that would be a really cool idea. And let's, let's just try that out. So like, when we did approach that, like, what were like a few things that we were thinking about, when we when we approached this and put it we ask ourselves what we really want from the from the app? Can you share that? Maybe?

Amos Gyamfi: 7:31

Yeah. So in the first place, we wanted a clear way, like, we just wanted to make this app open source, so that people just can also contribute to the application if they like. And then we just wanted to make it fun and free, like, including some few examples, whereby people can just play around the animation before they use the code in our choices to animation. And then we didn't want to mess that up to be bloated. It should be just put some few examples, and maybe given explanation to all the parameters of the reasons and spring animations, so that people will just get to know what each parameter represents. Yeah.

Stefan Blos: 8:24

And I think what's interesting is like this, these explanations you mentioned, right? Because, like, the, the basic setup of having, having the ability to play around with animations is very cool. But like, one advantage that we have is basically you because like you've been working as an interaction engineer, and like, and I have a very, very good eye for design and how to create the correct great looking interactions. So that's also like, one thing we thought about would be really helpful because people can benefit from your knowledge there. Because like, this is, this is information that's not included in the API that that Apple provides. But this is like things like Okay, so there's, there's a parameter I can set, for example, like stiffness, or what does it mean? So what is what is the meaning when I increase or decrease the value and what is maybe a range of sensible values that you can actually set so that the, that the animation looks good, and that's something that I think is really helpful for other people to learn from you. Because like, you have a good feeling because you'd like us new, like for the past month, you share a lot of a lot of innovations around around that. And that's something some of the learnings from you, that we thought would be really helpful for other people to have. That's why we included that in the in the app as well.

Amos Gyamfi: 9:56

Yeah, for example, previously, I have been more interested in how to move for example, we have this is in functions like linear is in is out, but you can just use any one of them, but in which context. So when when do you need to use linear so if you set this app, if you check the explanation about linear, you can see you just use it when you want like constant movement you want animation in which the objects are maybe rotates constantly without even stopping. So in that case, a linear will be the best. And then we also have some other types like ease in out and it is all explained in the app and when to use each one of them. Yeah,

Stefan Blos: 10:44

yeah. He likes that we include that. But I don't want to put too much self love into this space. Okay, so So you mentioned like the few the few thoughts that we added, what do you what do you want it from the app. So another thought we had was, do you quickly touched on that with the, with UBU. Having said that, we didn't want the app to be bloated with too much functionality, it should be really, like crisp. And it should really do this one thing very well, and not try to do everything. So our approach was to even leave out some of the ideas we had. Because we wanted to really create like this, this list of things that we think is necessary to have like this, this most likely like this minimum viable, minimum viable product MVP. Because like, we wanted to say, Okay, let's let's create this, then release it. And then think about what we can add in later versions, but cut out really unnecessary things. To be able to ship that in a fairly fast timeframe, and then hear from people like, what do they think? Are they enjoying that and maybe other other feature ideas they have. So that meant that we will try to basically include a few examples. Like we have, I think for right now, we have like the circles and we have a nice change the animation and emojis and then something like a gradient setup. So we limited that, we would have like, way more way more animations to share there. But like this, this was the limitation we set ourselves. And then we also want to like keep it very simple, like we use, mostly mostly the basic UI components that that come with Swift UI that you can use on Mac OS, but like this approach should really go with functionality first, instead of creating a fancy design, that maybe will, will lead to problems from the UX perspective. So yeah, that was like the, the idea, we had like one example where we had to like cut functionality. For example, we have this visualization of the of the easing curves, that that you mentioned. And like there's this visualization of a graph. And like this, there's, there's a few dots there that indicate the control points, basically, of the animation. And it would be really cool to drag and drop them to change the animation. But that will be like, a little bit more complex to create. So we set decided to cut that out of the out of the MVP and the first version, but to include that in the later Later update. And so what was what was the list of features, we want to include emos?

Amos Gyamfi: 13:45

Yeah, so we also think it will be good to support something like spring animation, because I was working on that already. So at the moment, the app supports three types of spring animations. And then maybe in the future versions, if we see the need, we will also include the other types of spring animation, if you look into Swift UI, we have like six different kinds of spring animations. So now it supports all three of them. And then we also thought it will be good to support all the default events like ease in ease out and linear and then default, then we also thought like, it will be good if we add a preview, like you can go in and adjust a parameter. And as you adjust it, you also need to see what is going on before you get the code for the swift UI animation. And then the last one is ability to copy the animation code for swift UI. So at the moment, if you adjust anything, you can just copy the code and that support both implicit animations and explicit, explicit animation as well. Yeah. So that are the main features. So we can now move on to the development process. So if Stefan You can just start like, what went into the development process?

Stefan Blos: 15:23

Yeah, I was muted. I tried to. I already started talking, but it was very good. Yeah, the development process. I mean, I think it really helped us. I just want to quickly touch on that it really helped us to have like a clear goal in mind. And that's why I think it was very helpful to have these thoughts that we had before starting with everything To make the development process really, like streamlined and then think about like, how do we want to approach that? And from that it was basically like, like we mentioned, like you had created already a few of the animations before. And what what what you meant it was to your, basically revisited those prepared them so that we can, that we could include those in the app. And I started off with creating the skeleton of the Mac App, which was very interesting, because I like, I think both of us we never approached MacOS development before.

Amos Gyamfi: 16:24

No, never, for me have any experience about it?

Stefan Blos: 16:28

Yeah, yeah, me too. Like I was a little bit scared because we used swift UI, and we're both pretty familiar with it. But like, I heard some horror stories that it's necessary to bridge with apt get a lot for creating backups. But I have to say like, the process was really nice. And I'll talk a little bit about that more later. But it has been a very, very, very smooth for myself, at least. But yeah, I mean, I created the skeleton, so that we can that we could like, like, experiment with the parameters we had. And like, see, see life previous. And then we basically just put those two pieces together, like the animations you prepared, and like the skeleton that i i created there. And from there, we I mean, that was basically already the pretty much the version that ended up shipping. I mean, we we of course updated a few things like we iterated on that. We also like, added more, more of the animations that you see now in the app. So I think like this, it was it was really helpful to get like this, this basic setup running, and then just add things from there. Because it really helped us to quickly see like, how everything's working and how we can improve upon upon that. But yeah, like, like I mentioned, like, we have more things ready, we're going to tackle. But so so this was the development process, which was a lot of fun, I have to say. But like, how did we approach the release, maybe that's also interesting for the listeners.

Amos Gyamfi: 18:14

So with the release, we first tested, between ourselves, I just spent like two days to go through the UI and each functionality. And then I identified some few issues about it. And then I created a notion document where I listed everything I found, which can be improved. So you also tested it, I think for two days also. And then we thought it would be good if we get it into the hands of more people. So we created a test flight, and then invited some members of the iOS development team at stream to this also tested to get feedback. And then we also improved upon that. And then in the same week, there was one similar app, which was released on I saw on Twitter and also on the product as well. It is called COVID. Also, so it does similar things as this app. And so we became very scared. Yeah. But we had everything in place. So like. Yeah. So that is all we did about the release.

Stefan Blos: 19:38

Yeah, I think I think like touching, touching quickly on this, on this thing about the adapter was released. I mean, we were pretty surprised by it, because we hadn't heard of it before now. But I think it's it's like, it's it's still a developer, they took a little bit of a different approach. So I think it's, it's like, it also touches on the point like for, for indie developers, that's maybe interesting. Like, only because there's other apps that do something in a similar way, or have a similar approach. It doesn't mean that the app that you create is not like also like worth creating, because there's always things that are going to be done differently. For example, like this other app, they put a lot of focus on a very nice design and a very, very sophisticated approach there. And like our approach was to get it more basic but but like to really focus on the on the UX being great. And the other one is, I think also paid and we learn decided to go for a free approach. So I think there's like, a different, different use case for both of the apps. So I think I think that's also something to really consider that it's not not really important, like, there can be other products, they can can look the same, or they can be pretty, pretty similar, but there's still going to be a lot of differences that people, people will enjoy that way where people will be using the different versions for themselves. Alright, so I think the release process was was pretty, pretty nice for us. So what are the plans that we, that we have for the future?

Amos Gyamfi: 21:30

For now, we try to move everything to get up. At the moment, we have the bots and everything we are working on in an ocean. And that is very difficult to work with. So we want to move that to GitHub. And then we can also track issues. And if people are interested, they can also contribute to this project as well. And then we support for animation examples now. So we are still we even have some some animation already done. And so we plan to include more of them in the future resin as well. And then as you can see, we have to improve the overall user experience of the application. For example, if you change the animation to use the time in case, you don't have any ability to use the control handles to this, it just sets the values of the control points. So we just listed that we will implement it in in later reason as well. So that people get the ability to just adjust values using the control points. Yeah,

Stefan Blos: 22:44

yeah. And yeah, that's I think, otherness example, again, for like us deciding to postpone that. Because I mean, we both thought that this feature would be pretty cool. But it was really, it was was really like hard to get it done in time. So we decided to postpone that and use it for a future version. And what you mentioned like this, that we want to move the entire like process to get up. I mean, this is also part of the open source approach that we're taking here. And you can see, like I share, I share the links to the to the repo and the tweet that I attached to the toothpaste, so feel free to check that out. And I think this is a very, very cool thing that we're experimenting with. Because we would really like to see the people who are using our app, and are using the app to one have the option to see how we did that, and how we how we implemented everything, but also basically be included in the entire process of the app going forward. So in case you're interested, like, go to the repo, play around with like, clone it, metaphoric play around with it. And if you have ideas or features you would like to see, then it's, I think, very cool thing to just be able to open issues there. And like, just get a discussion going, maybe other people will have same ideas or different ideas. And we can we can see from there, what people are interested in and how we can move forward with everything. And I am already set. We are also very happy when people want to come to contribute to the app, because I think that's that could be a very, very cool thing to have. All right. I think that was there was basically everything we wanted to say from our side. In case there's any questions from any of you, then please, please, please feel free to like request, speaking speaking rights in the Twitter space. And we would love to hear from you. Aside from that, I want to mention again, like the app is free, you can you can see the second tweet I attached to the space. So feel free to check it out. Like the first tweet I shared shows the report itself so you can also check that out consider giving it a star if you enjoy it, because like it helps basically us to take time and move it forward. If you do so, so that will be very nice. And like while we're still waiting and giving people the option to to to ask her stuff, and Michaela already raised her head so hemiola nice to hear hear from you. You're not edited the speaker and you can unmute yourself if you would like to speak.

Unknown: 25:56

Yeah, I have a question for Amos. If that is okay.

Amos Gyamfi: 26:01

Yeah, sure. It's fine. Yeah.

Unknown: 26:04

What I observed by following gamers, is I was stunned about his innate talent. It's like, he was born with the superpower of just understanding animations. It kind of comes in his nature. So I want to ask him, How does he know when he sees something in real life? It would be spring animation, it would not be, I really think you'll have a talent there. If I'm not wrong, right? I was.

Amos Gyamfi: 26:33

So I will start from where it began. So I studied physics. So I was merely interested in how things move like mechanical motion and everything. So when I came to Finland, here, I also got the chance to study about physics a bit, and then I changed to it. So I have been creating animation for a really long time. And then I just wanted to start with core animation. So in 2017, I started to learn core animation, and there was this application code compositor it was released, then I noticed, like, I can just model everything and create everything visually, and also use some JavaScript code to just add internal interactivity to all the animations I created. And that was really useful. And there was also the ability to just generate Swift code at the same time. So I was able to use the tool to just create a lot of prototypes. Like, I can just imagine, maybe if the animation needs to be spring, or if it needs to be normal isn't I can just figure out how it works. Exactly. Using pipe. Yeah. So that helped me a lot in my process, before I just switched. So that is all.

Stefan Blos: 28:07

Did that answer your question? Yeah.

Unknown: 28:10

Totally. And this makes sense that he knows some stuff. Because he thinks like that he thinks like another Mater and an engineer. If you think about I think that his talent is unique, because there is not intersection of those two skills in one person. I think he would you guys would just have an agency that does animation for people just explain. And then they can do it in whatever time because that's like, unique, no one knows it. And that that's my take, you know,

Stefan Blos: 28:43

that's very confident, I can assure you that we are very happy to have a bus.

Unknown: 28:52

Thanks. I have another I have more questions about the app, because this is custom timing car. Okay, that's okay. But what about transform matrices? For other animation parameters, if you know that up on the GitHub that has all the animation properties in Swift, and then there's a corresponding Mac app? For swift UI helper, I don't know the name. And so there are many 3d Space thing is there with CAR, CAR transformers yet Assam 3d and stuff like that. So I just thinking maybe you can add that.

Stefan Blos: 29:34

Yeah, maybe that's that's a good idea. What do you think?

Amos Gyamfi: 29:42

I think it's really a great idea. So we can just think about that. And if we are able to just implement it in future versions, I think it will be great. Yeah.

Stefan Blos: 29:52

Yeah. And I mean, please, please share the links that you mentioned, you can either send it to Amos or myself, because I would really be interested in having a look at that, to see how we can maybe leverage that in our app as well.

Unknown: 30:07

Yeah, I will send a GitHub repo that was really revolutionary repo about animations in Swift. You I just converted it so that it works on Mac. So you don't you don't have to, you know, run it in a simulator. So I will I think it's self documenting. So you can just read everything from there.

Stefan Blos: 30:29

Yeah, that'd be really awesome. Thanks already for sharing. Thanks. Alright, you do you have more questions or in case anyone else has questions? Please feel free to request speaker right here. Okay, yeah, doesn't seem to have more questions. Like, why we still give the listeners the option to have to ask questions? No, sorry. I just wanted to quickly touch upon the point that I was I was scared to get started with Mac OS development. But like, the approach that we took with using Swift UI only was actually surprisingly easy. Because like, I think there's this a single very minor point that we had to.

Amos Gyamfi: 31:20

Hello. Sorry, I

Unknown: 31:21

haven't. Yeah, I have a problem with my connection. Can you hear me?

Amos Gyamfi: 31:26

We can see we got here. Yes. Yeah, I didn't

Unknown: 31:28

know if you already answered these one. But I wanted to see if you can make sure resources, boots, blocks that you can recommend for people to understand more about automation. So probably, you know, people like me, are interested in, you know, collaborating with you guys, and maybe setting up er in the future. But I really try to understand more about how automation works. And all this theory behind. Can you recommend like, resources where people can learn more about that?

Stefan Blos: 32:03

I'm sure. Let's have some here.

Amos Gyamfi: 32:05

Yes, I have some a lot of links, which I can share with you after this. Yeah. I'll do that.

Unknown: 32:15

And thanks, guys, for doing this. I really appreciate your effort. And I think it's a great idea. And something that is definitely helped me do my work only to be faster.

Amos Gyamfi: 32:28

Okay, good to hear.

Stefan Blos: 32:29

It's very good. So yeah, that's that's exactly what we aim to do. Right? Yeah. So I think if you like we must, we'll, we'll share some resources there. So I think if there's not more questions, I think we pretty much reached the end right? Now, don't want to share anything

Amos Gyamfi: 32:55

that is written I have so. Okay, so again,

Stefan Blos: 33:01

just to quickly sum up, like you can, you can check out the app, it's free, there's You can also like, see that there's not really not really anything spectacular we're doing because you also can have a look at the code. Like I shared the tweets about that. If you want to want to contribute, and please, please check out the GitHub repo, maybe give it a star if you like it and you can always open up issues there. We will discuss that. And if you have Feature Ideas, then please please do that. Or you can also contact either Amos on Twitter, I must not see your Twitter handle.

Amos Gyamfi: 33:40

Emma's then interfere.

Stefan Blos: 33:43

Okay. And minus Stephen J blows I think so. Feel free to reach out to us. Follow us to get more info and if you have ideas, then always feel free to contact us. Just DM us or at mentioned us on Twitter. We're always happy to discuss. And I think that's it. Right. So thanks, everybody for listening. And we will be back next week with another coffee chat tutor space. Thanks, Amos for being my wonderful co host today. All right, thanks a lot. Have a great rest of your week everybody. Bye bye. Bye bye.