first commit

motion-canvas-animations/presentation-animations/src/motion-canvas.d.ts

@@ -0,0 +1 @@
+/// <reference types="@motion-canvas/core/project" />

motion-canvas-animations/presentation-animations/src/project.meta

@@ -0,0 +1,32 @@
+{
+  "version": 0,
+  "shared": {
+    "background": null,
+    "range": [
+      0,
+      null
+    ],
+    "size": {
+      "x": 1920,
+      "y": 1080
+    },
+    "audioOffset": 0
+  },
+  "preview": {
+    "fps": 30,
+    "resolutionScale": 1
+  },
+  "rendering": {
+    "fps": 60,
+    "resolutionScale": 1,
+    "colorSpace": "srgb",
+    "exporter": {
+      "name": "@motion-canvas/core/image-sequence",
+      "options": {
+        "fileType": "image/png",
+        "quality": 100,
+        "groupByScene": false
+      }
+    }
+  }
+}

motion-canvas-animations/presentation-animations/src/project.ts

@@ -0,0 +1,7 @@
+import {makeProject} from '@motion-canvas/core';
+
+import example from './scenes/example?scene';
+
+export default makeProject({
+  scenes: [example],
+});

motion-canvas-animations/presentation-animations/src/scenes/example.meta

@@ -0,0 +1,5 @@
+{
+  "version": 0,
+  "timeEvents": [],
+  "seed": 1375832605
+}

motion-canvas-animations/presentation-animations/src/scenes/example.tsx

@@ -0,0 +1,22 @@
+import {makeScene2D, Circle} from '@motion-canvas/2d';
+import {all, createRef} from '@motion-canvas/core';
+
+export default makeScene2D(function* (view) {
+  const myCircle = createRef<Circle>();
+
+  view.add(
+    <Circle
+      ref={myCircle}
+      // try changing these properties:
+      x={-300}
+      width={140}
+      height={140}
+      fill="#e13238"
+    />,
+  );
+
+  yield* all(
+    myCircle().position.x(300, 1).to(-300, 1),
+    myCircle().fill('#e6a700', 1).to('#e13238', 1),
+  );
+});