---
title: "Transitions"
description: "Blend adjacent video clips into each other with CE.SDK clip-to-clip transitions such as cross-fades, pushes, and wipes — right in the timeline."
url: "https://img.ly/demos/transitions/web/"
type: "demo"
demoId: "transitions"
starterkit: "guides-create-video-apply-transitions-browser"
platforms: ["Web"]
tags: ["video-editing","web"]
relatedDemos: ["https://img.ly/demos/animations/web/","https://img.ly/demos/video-ui/web/","https://img.ly/demos/start-with-video/web/"]
webDocumentation: "https://img.ly/docs/cesdk/js/create-video/apply-transitions-146026/"
webGithub: "https://github.com/imgly/cesdk-web-examples/tree/main/guides-create-video-apply-transitions-browser"
webCodeSandbox: "https://stackblitz.com/github/imgly/cesdk-web-examples/tree/main/guides-create-video-apply-transitions-browser"
---

> This is the markdown version of [Transitions](https://img.ly/demos/transitions/web/). For all pages in one file, see [llms-full.txt](https://img.ly/llms-full.txt). For an index of all available pages, see [llms.txt](https://img.ly/llms.txt).

---

## Available platforms

**Web** — [Open the demo](https://img.ly/demos/transitions/web/)
- [Documentation](https://img.ly/docs/cesdk/js/create-video/apply-transitions-146026.md)
- [Source code on GitHub](https://github.com/imgly/cesdk-web-examples/tree/main/guides-create-video-apply-transitions-browser)
- [Try it in StackBlitz](https://stackblitz.com/github/imgly/cesdk-web-examples/tree/main/guides-create-video-apply-transitions-browser)

Transitions turn a hard cut between two clips into a smooth scene change. CE.SDK ships a library of clip-to-clip transition presets — cross-fades, pushes, slides, and wipes — that users apply directly in the timeline, with real-time preview on the canvas. Each transition belongs to the outgoing clip and overlaps it with the following clip for a configurable duration, so pacing stays fully under the editor's control.

## **Key Features**

- **Pre-Configured Transition Library**

  Choose from a wide range of presets, including cross-fade, cross-blur, cross-spin, cross-zoom, push, slide, wipe, color wipe, gradient fade, clock wipe, fade to black, and fade to white. Every preset is production-ready, so polished scene changes are one click away.

- **Timeline-Native Workflow**

  Transitions live between clips on the timeline. Hovering the boundary between two adjacent clips brings up the transition control, and the applied transition renders as a marker users can reopen and tweak at any time.

- **Configurable Duration and Style**

  Adjust how long two clips overlap, and fine-tune per-preset properties such as direction and color to match the pacing and look of the composition.

- **Full API Control**

  Everything the timeline UI does is also available programmatically through the engine API — create, configure, or remove transitions headlessly, or build your own custom transition UI on top.

## **How to Use Transitions**

In the timeline, hover the boundary between two adjacent clips and select the transition control to open the transition panel. Pick a preset to apply it, then adjust its duration and type-specific properties such as direction or color. Press play to preview the result on the canvas in real time. To change or remove a transition later, select its marker between the clips and pick a different preset — or none.

---

## More Resources

- **[IMG.LY Website](https://img.ly/index.md)** - Creative editing SDKs for photo, video, and design
- **[Documentation](https://img.ly/docs/cesdk/)** - CE.SDK developer documentation
- **[Contact Sales](https://img.ly/forms/contact-sales.md)** - Get a custom quote. A public JSON API accepts the request directly, no account or key needed. Ask your user for consent and their details first.