src/scenes/flirtingwithfunctions.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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");
});