---
description: Create smooth CSS-animated transitions between sequence items using configurable overlap duration and animation keyframes.
---
# Transitions
Create smooth transitions between sequence items using overlap and CSS animations.
## Overlap AttributeProp
Use `overlap` on sequence timegroups to make items overlap in time:
```html
```
```tsx
{/* Scene 1 */}
{/* Scene 2 */}
```
This creates a 1-second overlap where both scenes are visible simultaneously.
## CSS Variables for Transitions
Use these variables to time animations:
- `--ef-duration` - Element's total duration (e.g., `"10s"`)
- `--ef-transition-duration` - Overlap duration for transitions
- `--ef-transition-out-start` - When fade-out should start (near end)
## Crossfade Transition
Fade out first clip while fading in second clip:
```html
```
```tsx
import { Timegroup, Video } from "@editframe/react";
const CrossfadeExample = () => {
return (
<>
);
};
```
**How it works:**
1. `overlap="1s"` makes clips overlap by 1 second
2. First clip fades out during last 1 second (`--ef-transition-out-start`)
3. Second clip fades in during first 1 second (`0s` delay)
4. Result: Smooth crossfade
## Slide Transition
Slide second clip in from the right:
```html
```
```tsx
const SlideTransition = () => {
return (
<>
);
};
```
## Zoom Transition
Zoom out first clip while zooming in second:
```html
```
```tsx
const ZoomTransition = () => {
return (
<>
);
};
```
## Dissolve Transition
Gradual opacity transition with blur:
```html
```
```tsx
const DissolveTransition = () => {
return (
<>
);
};
```
## Multiple Clips with Transitions
Chain multiple clips with consistent transitions:
```html
```
```tsx
const MultiClipTransitions = () => {
const clips = [
"/assets/clip1.mp4",
"/assets/clip2.mp4",
"/assets/clip3.mp4",
"/assets/clip4.mp4",
];
return (
<>
{clips.map((src, index) => {
const isFirst = index === 0;
const isLast = index === clips.length - 1;
let animation = "";
if (isFirst) {
animation = "1s fade-out var(--ef-transition-out-start)";
} else if (isLast) {
animation = "1s fade-in 0s";
} else {
animation = "1s fade-in 0s, 1s fade-out var(--ef-transition-out-start)";
}
return (
);
})}
);
};
```
**Pattern:**
- First clip: fade-out only
- Middle clips: fade-in and fade-out
- Last clip: fade-in only
## Transition Timing
Match overlap duration to animation duration:
```html
```
```tsx
{/* overlap="1s" matches animation duration of 1s */}
```
**Important:** Animation duration should match overlap duration for smooth transitions.
## No Overlap (Cut)
Omit `overlap` for instant cuts between clips:
```html
```
```tsx
```
## Reusable Transition Component
Create a reusable component for transitions:
```tsx
interface TransitionProps {
children: React.ReactNode;
type?: "fade" | "slide" | "zoom";
duration?: string;
}
const TransitionScene = ({
children,
type = "fade",
duration = "1s"
}: TransitionProps) => {
const animations = {
fade: {
in: `${duration} fade-in 0s`,
out: `${duration} fade-out var(--ef-transition-out-start)`,
},
slide: {
in: `${duration} slide-in-right 0s`,
out: `${duration} slide-out-left var(--ef-transition-out-start)`,
},
zoom: {
in: `${duration} zoom-in 0s`,
out: `${duration} zoom-out var(--ef-transition-out-start)`,
},
};
return (
{children}
);
};
// Usage
```
## Tips
1. **Match durations** - Overlap and animation duration should be equal
2. **Use contain mode** - Wrap clips in `mode="contain"` timegroups
3. **Absolute positioning** - Add `class="absolute w-full h-full"` for overlays
3. **Absolute positioning** - Add `className="absolute w-full h-full"` for overlays
4. **Test transitions** - Preview to ensure smooth timing
5. **Combine effects** - Mix opacity, transform, and filter for complex transitions
6. **Extract to components** - Create reusable transition components
## See Also
- [css-variables.md](references/css-variables.md) - CSS variables reference
- [timegroup.md](references/timegroup.md) - Timegroup modes and sequencingcomponent reference