Skip to Content
Welcome to Diffusion Studio Core v3.0 - Now Available! 🎉
DocumentationTransitions

Transitions

Diffusion Studio supports a range of basic transitions that can be applied to Clip objects. To apply a transition, both Clips must be within the same Layer.

Basic Transitions

Fade Transition

The Fade transition provides a smooth fade-in and fade-out effect between clips.

import * as core from '@diffusionstudio/core'; const layer = composition.createLayer().sequential(); await layer.add( new core.ImageClip('/image1.png', { height: '100%', duration: '3s', transition: { duration: '3s', type: 'dissolve', } }) ); await layer.add( new core.ImageClip('/image2.png', { height: '100%', duration: '3s', }) );

Supported Transitions

The following transitions are available for use:

  • dissolve: Creates a smooth fade between clips.
  • slide-from-right: Slides the next clip from the right.
  • slide-from-left: Slides the next clip from the left.
  • fade-to-black: Fades the clip to black before transitioning.
  • fade-to-white: Fades the clip to white before transitioning.
Last updated on