> ## Documentation Index
> Fetch the complete documentation index at: https://motionly.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Working with video, GIF, SVG, and Lottie assets

> Import, preview, scrub, edit, and export video, GIF, animated SVG, and Lottie assets in Motionly with frame-accurate seeking and MP4 rendering.

# Animated Assets

Motionly treats animation as part of the asset. It does not replace animated media with a poster frame or silently discard motion.

## Supported Formats

| Format             | Preview and playback                 | Scrub/export synchronization                                                  |
| ------------------ | ------------------------------------ | ----------------------------------------------------------------------------- |
| MP4, WebM, MOV/M4V | Native browser video decoder         | Exact seek when the browser supports the file's codec                         |
| Lottie `.lottie`   | Official dotLottie Canvas renderer   | Exact frame selection from project time                                       |
| GIF                | Native `ImageDecoder` when available | Exact variable-duration frames; real-time fallback with a warning             |
| Animated SVG       | Real-time SVG-to-Canvas playback     | SMIL where supported; real-time export; CSS keyframe differences are reported |

All formats remain normal editable Motionly layers: position, scale, rotation, transform origin, skew, opacity, blur, masks, timing, and transitions continue to work.

## Import And Time Media

Use the Media panel or import it in source:

```motion theme={null}
import "./assets/feature.lottie" as feature

feature {
  center
  width 640
  layer hero
}

clip feature {
  track hero
  start 1s
  duration 4s
  trimIn 0s
  trimOut 0s
}
```

Drag the clip horizontally to change its start, vertically to change its visual layer, or trim its edges without rippling other clips.

## Browser Limitations

MOV names a container, not a codec. If a MOV file fails to load, Motionly reports the browser decoder error; re-encoding to H.264 MP4 or VP9 WebM is the most portable fallback.

Animated SVG remains live in preview and real-time export, but exact scrub positions cannot control its internal animation clock. The Canvas SVG runtime handles common SMIL animation; CSS keyframes are not fully supported and may differ from browser DOM playback. Motionly reports this instead of displaying a still and pretending the animation worked.

Browsers without `ImageDecoder` use real-time GIF playback/export and show the same kind of explicit warning.

## Verify Before Delivery

Preview an early, middle, and late frame of every animated asset. Check clip trim boundaries, replay after resetting the playhead, and render a representative export to prove the animation was not flattened.