slide-up

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 SlideUpProps = MotionPrimitiveProps & {
10  /**
11   * Vertical offset in pixels at the start. Scales with the frame by default —
12   * and under `mask`, defaults to the element's own height instead, which is
13   * the only travel that actually clears the mask.
14   */
15  distance?: number;
16  /**
17   * Clip the child to its own box so it rises out of a mask rather than
18   * fading up. The editorial move for a headline; leaves opacity alone.
19   */
20  mask?: boolean;
21  /** Extra room inside the mask so descenders are not clipped. */
22  maskPadding?: number;
23};
24 
25/**
26 * Rises into place. Opacity finishes at 55% of the travel, so the line lands
27 * solid instead of still resolving as it stops.
28 */
29export const SlideUp: React.FC<SlideUpProps> = ({
30  children,
31  distance: distanceProp,
32  mask = false,
33  maskPadding = 0,
34  block,
35  style,
36  className,
37  ...motionProps
38}) => {
39  const { width } = useVideoConfig();
40  const { displace, opacity, sign } = useEnterExit(motionProps);
41 
42  if (mask) {
43    /* Percentages are of the element's own height, so any box clears its mask
44     * without the caller having to know how tall the content came out. */
45    const travel =
46      distanceProp === undefined
47        ? `${displace * 100 * sign}%`
48        : `${displace * distanceProp * sign}px`;
49 
50    return (
51      <MotionWrapper
52        block={block}
53        className={className}
54        style={{
55          overflow: "hidden",
56          paddingBottom: maskPadding,
57          marginBottom: -maskPadding,
58          ...style,
59        }}
60      >
61        <div style={{ translate: `0px ${travel}` }}>{children}</div>
62      </MotionWrapper>
63    );
64  }
65 
66  const offset = displace * (distanceProp ?? scaleFont(40, width)) * sign;
67 
68  return (
69    <MotionWrapper
70      block={block}
71      className={className}
72      style={{
73        ...style,
74        opacity,
75        translate: `0px ${offset}px`,
76        transformOrigin: "center bottom",
77      }}
78    >
79      {children}
80    </MotionWrapper>
81  );
82};