Transitions

In this guide, you will learn how to implement basic animated transitions to the View and Rescaler components.

Width transition

Rescaler component handles the animations of its children automatically as long as transition field is defined. When the scene updates, the component will animate the transition between the original state and the new one.

function App() {
  const [beforeTransition, setBeforeTransition] = useState(true);

  useEffect(() => {
    setTimeout(() => setBeforeTransition(false), 2000);
  }, []);

  return (
    <View style={{ backgroundColor: "#4d4d4d" }}>
      <Rescaler
        style={{ width: beforeTransition ? 480 : 1280 }}
        transition={{ durationMs: 2000 }}>
        <InputStream inputId="input_1" />
      </Rescaler>
    </View>
  )
}

Sibling component transitions

If there are two sibling Rescaler components and only one of them has a width transition applied, the layout of the other will be adjusted automatically.

function App() {
  const [beforeTransition, setBeforeTransition] = useState(true);
  useEffect(() => {
    setTimeout(() => setBeforeTransition(false), 2000);
  }, []);

  return (
    <View style={{ backgroundColor: "#4d4d4d" }}>
      <Rescaler
        style={{ width: beforeTransition ? 480 : 1280 }}
        transition={{ durationMs: 2000 }}>
        <InputStream inputId="input_1" />
      </Rescaler>
      <Rescaler>
        <InputStream inputId="input_2" />
      </Rescaler>
    </View>
  )
}

Customizing interpolation functions

All the examples above utilize the default linear interpolation; however, you can also choose from other available modes.

function App() {
  const [beforeTransition, setBeforeTransition] = useState(true);
  useEffect(() => {
    setTimeout(() => setBeforeTransition(false), 2000);
  }, []);

  const top = beforeTransition ? 0 : 540;

  return (
    <View style={{ backgroundColor: "#4d4d4d" }}>
      <Rescaler
        style={{ width: 320, height: 180, top, left: 0 }}
        transition={{ durationMs: 2000 }}>
        <InputStream inputId="input_1" />
      </Rescaler>
      <Rescaler
        style={{ width: 320, height: 180, top, left: 320 }}
        transition={{ durationMs: 2000, easingFunction: 'bounce' }}>
        <InputStream inputId="input_2" />
      </Rescaler>
      <Rescaler
        style={{ width: 320, height: 180, top, left: 640 }}
        transition={{
          durationMs: 2000,
          easingFunction: {
            functionName: 'cubic_bezier',
            points: [0.65, 0, 0.35, 1],
          },
        }}>
        <InputStream inputId="input_3" />
      </Rescaler>
      <Rescaler
        style={{ width: 320, height: 180, top, left: 960 }}
        transition={{
          durationMs: 2000,
          easingFunction: {
            functionName: 'cubic_bezier',
            points: [0.33, 1, 0.68, 1],
          },
        }}>
        <InputStream inputId="input_4" />
      </Rescaler>
    </View>
  );
}