Adding and subtracting animations

This example demonstrates that animation values can be added, subtracted, multiplied and divided with each other to create more complex animations. The standard JavaScript operators like + and - may be used.

tsx
import {
  AbsoluteFill,
  interpolate,
  spring,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";
 
export const TwoPushes: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
 
  const scalePush1 = spring({
    fps,
    frame,
    config: {
      damping: 200,
    },
  });
 
  const scalePush2 = spring({
    fps,
    frame: frame - 30,
    config: {
      damping: 200,
    },
  });
 
  const scalePush3 = spring({
    fps,
    frame: frame - 60,
    config: {
      damping: 200,
    },
  });
 
  const scale = scalePush1 + scalePush2 + scalePush3;
 
  const left =
    interpolate(scalePush1, [0, 1], [0, 80]) +
    interpolate(scalePush2, [0, 1], [0, 80]) +
    interpolate(scalePush3, [0, 1], [0, 80]);
 
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        padding: 50,
        backgroundColor: "white",
      }}
    >
      <div
        style={{
          height: 100,
          width: 100,
          backgroundColor: "#4290f5",
          borderRadius: 40,
          transform: `scale(${scale}) translateX(${left}px)`,
        }}
      />
    </AbsoluteFill>
  );
};

tsx
import {
  AbsoluteFill,
  interpolate,
  spring,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";
 
export const TwoPushes: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
 
  const scalePush1 = spring({
    fps,
    frame,
    config: {
      damping: 200,
    },
  });
 
  const scalePush2 = spring({
    fps,
    frame: frame - 30,
    config: {
      damping: 200,
    },
  });
 
  const scalePush3 = spring({
    fps,
    frame: frame - 60,
    config: {
      damping: 200,
    },
  });
 
  const scale = scalePush1 + scalePush2 + scalePush3;
 
  const left =
    interpolate(scalePush1, [0, 1], [0, 80]) +
    interpolate(scalePush2, [0, 1], [0, 80]) +
    interpolate(scalePush3, [0, 1], [0, 80]);
 
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        padding: 50,
        backgroundColor: "white",
      }}
    >
      <div
        style={{
          height: 100,
          width: 100,
          backgroundColor: "#4290f5",
          borderRadius: 40,
          transform: `scale(${scale}) translateX(${left}px)`,
        }}
      />
    </AbsoluteFill>
  );
};