This is your UI when you create a new TextFrame post.

Type '/' to bring up the formatting menu.

Click on 'Animation Block'.

As you can see, the editor has added a blank animation block.

On the left side is where you can add a description,

and the right side is where you will create your animated diagrams.

Let's begin creating an animation by clicking on the White Rectangle on the right side of the animation block.

TextFrame will open up an animation canvas for you.

Create a new rectangle shape by clicking on the square icon in the top left corner.

Let's add another animation block so that we can animate our newly added rectangle.



Return to the main draft view by clicking on the exit button in the top right corner.

Add another animation block by clicking on the text area of Animation Block 1 and entering '/' to bring up the formatting menu.

Add a description and open up the canvas for Animation Block 2.

Click the 'Add layer from previous block' button.

You will be navigated to a screen with two canvases. The left canvas displays the previous animation block, and the right canvas displays the current animation block.



As you can see, the rectangle you created in the first animation Block shows up.

Click on the rectangle in the previous block to select it.

Click the 'Add' Button to add Rectangle 1 to your current canvas.

Click the 'go back to current layers' button to return to the canvas of your current block.

Select 'Rectangle 1' which you have added from animation block 1 into animatio block 2.

Drag the rectangle into a different position

Resize the rectangle by dragging one of the corners.

Exit the canvas and click the triangular 'play' button in the top right corner.

A preview of how your finished animation will show up.



If you scroll between the two blocks, you will notice that TextFrame seamlessly animates the rectangle's size and position between the two blocks.