[00:00] In this lesson, we'll take a look at the view canvas component. A free form component that allows us to customize the locations of nested views in space. We'll walk through just a simple example here. I've got a view called hexagon that just contains a single hexagon and I'll be showing an instance of that view on this view here. I'll start by pulling in a view canvas component from the component pallets. And once it's in, I'll configure a grow value of one so that it takes up all space in the view. Now much like the flex repeater, accordion, and carousel components, we're given this instances array in the properties, which allows us to create instances of whatever views we'd like. The first thing I'm going to do for this instance is find the view path field and set that to my hexagon shape. And just like that it'll appear in my view and now I have a few different options for where I'd like the view to appear on my canvas. So how about I start with this position prop here. If I set this to absolute, then all of the coordinate properties below it are evaluated in relation to the bounds of the view canvas. If I set it to relative, they're all evaluated in relation to the previous view instance that's also marked relative. Allowing you to string together different components in a chain. From there, we have four properties detailing how the view should be positioned. So if I set top and left to 100 pixels each, the view will appear 100 pixels offset from the top and left corners of the screen. Next step, we have a Z index, which details which view should appear on top in case of collisions, with the highest number winning out. After that, we have some width and height properties that will dictate the size of the view, provided the use default view with and use default view height properties are turned off below. Now that we've talked about some of the basic positioning of views on a view canvas, we're ready to discuss what happens when those position properties change. The view canvas is built to render the movement of views around the canvas space. So let's put together a little example to show that off. I'm going to take my hexagon view here and set up a binding on the top property. I'm going to make this an expression binding and write an expression that moves this view every second. So something like, if, get second, now 1000, % two. So every second this expression is going to take the current timestamp, extract the seconds field, and calculate the remainder of that field divided by two, which is going to flip flop between zero and one and so if that's one, we're going to say 500 PX in quotes. And if it's zero, we're going to say zero PX in quotes. And then a closed parenthesis at the end. So to see this in action, we can click okay. And now we can see that our view alternates between positions at a one second rate. In the property editor, we can find a transition settings property that allows us to customize how long the transition between states takes and allow us to change the timing function. Now there are a few different options here, but if I change it from linear to something like ease, we can see that that affects how the view moves between two positions. So that about wraps up the basics behind the view canvas components. It's an open sandbox component for customizing exactly how you'd like views to appear and even move inside your perspective session.