add animation

1 files changed, 33 insertions, 0 deletions

diff --git a/src/scenes/flirtingwithfunctions.tsx b/src/scenes/flirtingwithfunctions.tsx
new file mode 100644
index 0000000..ede0df9
--- /dev/null
+++ b/src/scenes/flirtingwithfunctions.tsx
@@ -0,0 +1,33 @@
+import { Img, Layout, Txt, Video, makeScene2D } from "@motion-canvas/2d";
+import {
+  Direction,
+  beginSlide,
+  createRef,
+  map,
+  slideTransition,
+  tween,
+} from "@motion-canvas/core";
+import { theme } from "../theme";
+import sad from "../../public/img/sad.mp4";
+import emacsmac from "../../public/img/emacsmac.jpg";
+
+export default makeScene2D(function* (view) {
+  const vid = createRef<Video>();
+  const img = createRef<Img>();
+  const startX = 1200;
+  const endX = 300;
+
+  view.add(<Video width={300} ref={vid} src={sad} x={0} />);
+  view.add(<Img width={200} ref={img} src={emacsmac} x={startX} />);
+
+  vid().loop(true);
+  vid().play();
+
+  yield* beginSlide("No Valentine");
+
+  yield* tween(4.2, (val) => {
+    img().position.x(map(startX, endX, val));
+  });
+
+  yield* beginSlide("Going To The Doctor");
+});