All of my YouTube videos were recorded in-engine, and the same animation tools are available to you.
To start, create an instance of a `Sequence` and override these two functions:
```cs
public class SequenceAnimation : Sequence
{
protected override void Update()
{
}
protected override void RenderToScreen(UIElement ctx)
{
}
}
```
The `Update` function will manage the timing of the animations:
```cs
float ease1;
float ease2;
protected override void Update()
{
// Wait 400ms
Skip(400);
// Ease from 0.0 to 1.0 over 800ms
ease1 = EaseF(800);
Skip(400);
ease2 = EaseF(800);
}
```
Then you can use these variables to control an animation:
```cs
protected override void RenderToScreen(UIElement ctx)
{
var width = Lerp(100, 200, ease1);
var height = Lerp(100, 200, ease2);
var size = new Size(width, height);
// Render the rectangle in the middle of the screen
var position = screen.Center - size / 2;
var rectangle = new Rectangle(position, size);
ctx.FillRectangle(rectangle, Color.Cyan);
}
```
Since the whole `Update()` function runs every frame, you can implement checkpoints to prevent later code from executing:
```cs
protected override void Update()
{
// Wait 400ms
Skip(400);
// Ease from 0.0 to 1.0 over 800ms
ease1 = EaseF(800);
Skip(400);
ease2 = EaseF(800);
// Wait until all the above have finished
if (Checkpoint("Shrink", 400))
return;
ease1 = 1.0f - EaseF(800);
Skip(400);
ease2 = 1.0f - EaseF(800);
}
```
Without this checkpoint, the 2nd values written to `ease1` and `ease2` would overwrite the 1st.
The above code produces this animation:
![[rectangle_animation.mp4]]
Rather than using a screen recorder like OBS and rendering the animation in real time, you can render the whole animation much quicker using the [[Rendering to MP4 Files]].
TODO - You can also animate:
- SVGs / Paths
- Code snippets
- 3D models / Shaders