Transitions

In this section, we'll explore how to create smooth transitions between two clips. Transitions are implemented using GLSL (OpenGL Shading Language) and can be applied between any two clips.

To create a transition, you need to provide the following parameters:

  • startClipId: The ID of the clip on the left side of the transition.
  • endClipId: The ID of the clip on the right side of the transition.
  • inDuration and outDuration: These values represent how much time the transition should take when it's inside the startClip or endClip, respectively. A value of 1000, for example, would mean the transition takes 1 second to complete.
  • transitionSrc: This is the GLSL code that defines the transition effect.

Let's take a look at an example of a cross fade transition:

Cross Fade Transition

Here's some sample code for a cross fade transition:

vec4 transition(vec2 uv) {
  return mix(getFromColor(uv), getToColor(uv), progress);
}

In this example, we're using the mix function to blend the colors of the two clips together. The progress variable represents the current position of the transition (0.0 for the start of the transition and 1.0 for the end).

Creating a Transition

To create a transition, you can use the following code:

const crossFadeShaderSrc = `
  vec4 transition(vec2 uv) {
    return mix(getFromColor(uv), getToColor(uv), progress);
  }
`;
 
const crossFadeTransition = new Transition({
  name: "Cross Fade",
  startClipId,
  endClipId,
  inDuration: 1000,
  outDuration: 1000,
  transitionSrc: crossFadeShaderSrc,
});
 
layer.addTransition(crossFadeTransition);

Available uniforms

We expose several built in uniforms that you can laverage in your transitions, including:

uniform sampler2D uSampler; // The primary sprite's texture
uniform sampler2D uSampler2; // The secondary sprite's texture to blend with
uniform float progress; // Progress factor [0, 1] where 0 is fully the first sprite, and 1 is fully the second sprite
uniform float ratio; // width / height
LayerClip