docs: convert examples to AnimationPlayer

[gmile]

This is an attempt to replace a single instance of AnimationPlayer with an interactive player with editor. The goal is to discuss it and see if this is desired and/or viable approach, and if yes, what are some major visual differences, such that could be a blocker for converting other instances of AnimationPlayer.

Notable visual differences:

• interactive player is visually much smaller, e.g. less outstanding than the AnimationPlayer,
• interactive player includes a large portion of source code straight away, so reader needs to scroll before seeing the rest of the page's content.

Before:

After:

[gmile]

ℹ️ I've converted a few more banner AnimationPlayer-s into fiddles, intend to look into implementing hiding of the fiddle UI / editor for them.

[aarthificial]

I converted this PR to a draft instead of labeling it as a "work in progress"
As I've mentioned on Discord, I think the banners should still be implemented using the player package.
All of the other examples however should be converted into fiddles.

The relevant Discord message:

After some thought, I think banners should continue using the motion canvas player
The fiddle uses one shared Motion Canvas instance which wouldn't play well with a banner that's supposed to play all the time
It's also a good idea to dogfood the player package on the docs

[gmile]

ℹ️ this needs a rebase now. Here's what needs to be done for this PR to be considered complete:

1. reset all changes on the fiddle,
2. bring back all banners to be video players again - e.g. reset all changes done to top-level banners in this PR,
3. convert all other examples across documentation to fiddles.

[gmile]

@aarthificial I've reset all changes previously made to <AnimationEditor banner...> and updated all examples that aren't banners. There's a bit more work necessary here, so before I do it I appreciate your review of the existing conversions first.

Additionally, I'd love your input on some issues that I've encountered:

1. all converted examples use a small attribute. Now that all these examples are gone, would you say it's necessary to keep supporting the small attribute in AnimationEditor or could it be cleaned up?

2. Additionally, some animations are huge in size now, see example below. However, modifying the absolute values of the shapes of the animation makes it fit, but it also becomes blurry. I'm not sure if blurriness is OK. Wtdy?

   Preserving size example

   
   Blurriness example

   

3. some more advanced code examples, for instance "tweening visualizer", are quite long:

   Long code example

   

   It looks a bit impractical to have such a long example. What do you think about it? wonder if adding something like a "show/hide source" button in the editor toolbar wouldn't help here, for example (not necessarily in this PR).

[gmile]

Following up on my previous comment, another issue worth pointing our is that highlighting of individual rows is gone. One example is this https://motioncanvas.io/docs/signals#complex-example: after converting it to AnimationEditor, the lines will no longer be highlighted.

[aarthificial]

@gmile

1. Yes, I believe we can get rid of the small attribute

2. This should be solved by adding an additional property for Fiddles that controls the ratio of the preview. That specific example could then use 16/9 as its ratio.

3. I'd expand this idea and add some sort of a switch for fiddles that lets you pick the mode:

   • code only (displayed as a simple CodeBlock)
   • code + preview
   • preview only

   However, the specific tweening visualizer example could be replaced with a much simpler one - a shape that moves left and right using the given timing function, together with a select box that lets us choose the timing function. (We already support multiple examples per fiddle with // snippet)

The missing highlighting could then be fixed with the "code only" mode.

I'm currently working on a documentation page that requires some of these Fiddle features and I'm in the process of implementing them.
I made #637 for the purposes of tracking it.

[gmile]

@aarthificial some tiny progress update on this:

Yes, I believe we can get rid of the small attribute

I've cleaned up the small attribute.

This should be solved by adding an additional property for Fiddles that controls the ratio of the preview. That specific example could then use 16/9 as its ratio.

After enabling 16/9 value as aspect ratio (thanks for adding it, btw!), here's how the example looks like - there's a bit more room now, but the circle is still too big. Probably it'd make sense to adjust the example values now, wtdy? I intent to play with the absolute values in the example a bit, but feel free to express your vision for how this should be handled ideally.

Screenshot 1

There's something about proportions in other examples too, see another screenshot below (though maybe even this happens to all example - I still intend to check all of them). So I think they will need adjustments too.

Screenshot 1

specific tweening visualizer example could be replaced with a much simpler one

Make sense, I'll work on a new one.

a select box that lets us choose the timing function

The description (e.g. "The effects of a particular easing function can be visualised...") to the example in question, as well as the example itself demonstrates only the easeInOutBounce function.

Now that you mention a select box to choose the timing function (via snippet, like some other examples already do), I have to ask: are you saying you would like more functions to be demonstrated within this particular instance of AnimationPlayer? If so, do you have a specific timing functions in mind you want to see in the select box, or all of them?

By all I am thinking of specifically this list (got it by looking at functions that return a value of TimingFunction type):

• easeInBack
• easeInBounce
• easeInElastic
• easeInOutBack
• easeInOutBounce
• easeInOutElastic
• easeOutBack
• easeOutBounce
• easeOutElastic

Maybe I am jumping too far ahead, but in case we want to have all functions added to given AnimationPlayer instance of Tweening page, then there's another question/suggestion:

1. on https://motioncanvas.io/docs/tweening/, for example in question (e.g. for easeInOutQuad), update the text description + add a select with 1-2 more functions,
2. on https://motioncanvas.io/api/core/tweening/, add an animation example (via AnimationPlayer) to each timing function.

I think doing this could help improve the API reference rich with examples of usage of individual functions, while the "Docs" section could focus more on the aspects of discovery and education of basic principles. Wdyt?

[aarthificial]

After enabling 16/9 value as aspect ratio [...] the circle is still too big

The examples were made using a 1920x1080 canvas.
The fiddle uses a fixed width of 960 with the height controlled by ratio.
So with a 16/9 ratio, it would be 960x540. This means that all lengths in the examples should be divided by two to make it look the same.

are you saying you would like more functions to be demonstrated within this particular instance of AnimationPlayer

I'm assuming that AnimationPlayers on this page are being replaced by Fiddles. The snippets for timing functions could then be added to the fiddle above:

Photo

If so, do you have a specific timing functions in mind you want to see in the select box, or all of them?

I think the list you've mentioned is ok.

Maybe I am jumping too far ahead, but in case we want to have all functions added to given AnimationPlayer instance of Tweening page, then there's another question/suggestion:

I think we should start by including them all in the handwritten docs. We don't include fiddles in the @example section of the API docs at the moment because they require the whole boilerplate with export default makeScene2D which IMO makes them less readable in an IDE.

In the future, I think it would be ideal to add some sort of template prop to Fiddle that would include the boilerplate automatically, for example, something like this:

```ts editor template=circle
yield* circle().scale(1, 1);
```

could result in:

export default makeScene2D(function* (view) {
  const circle= createRef<Circle>();
  view.add(<Circle ref={circle} size={140} fill="#e13238" />);
  
  yield* circle().scale(1, 1);  
});

But this may be out of the scope of this PR.