slide-left

1import { useVideoConfig } from "remotion";
2import { scaleFont } from "@/remotion/lib/layout";
3import {
4  useEnterExit,
5  type MotionPrimitiveProps,
6} from "@/remotion/lib/motion-primitive";
7import { MotionWrapper } from "@/remotion/lib/motion-wrapper";
8 
9export type SlideLeftProps = MotionPrimitiveProps & {
10  /**
11   * Horizontal offset in pixels at the start. Scales with the frame by default
12   * — and under `mask`, defaults to the element's own width.
13   */
14  distance?: number;
15  /** Side the child travels in from. */
16  from?: "left" | "right";
17  /** Clip the child to its own box so it slides out of a mask. */
18  mask?: boolean;
19};
20 
21/**
22 * Slides in on the horizontal — the reading axis, so it suits list rows and
23 * lower thirds where a rise would fight the line above it.
24 */
25export const SlideLeft: React.FC<SlideLeftProps> = ({
26  children,
27  distance: distanceProp,
28  from = "left",
29  mask = false,
30  block,
31  style,
32  className,
33  ...motionProps
34}) => {
35  const { width } = useVideoConfig();
36  const { displace, opacity, sign } = useEnterExit(motionProps);
37  const direction = from === "left" ? -1 : 1;
38 
39  if (mask) {
40    /* Percentages are of the element's own width, so any box clears its mask. */
41    const travel =
42      distanceProp === undefined
43        ? `${displace * 100 * direction * sign}%`
44        : `${displace * distanceProp * direction * sign}px`;
45 
46    return (
47      <MotionWrapper
48        block={block}
49        className={className}
50        style={{ overflow: "hidden", ...style }}
51      >
52        <div style={{ translate: `${travel} 0px` }}>{children}</div>
53      </MotionWrapper>
54    );
55  }
56 
57  const offset = displace * (distanceProp ?? scaleFont(60, width)) * direction * sign;
58 
59  return (
60    <MotionWrapper
61      block={block}
62      className={className}
63      style={{
64        ...style,
65        opacity,
66        translate: `${offset}px 0px`,
67        transformOrigin: from === "left" ? "left center" : "right center",
68      }}
69    >
70      {children}
71    </MotionWrapper>
72  );
73};