# Import panel controls
A reference for every control in the Import tab.

## How to access this

1. Open the LottieFiles plugin in After Effects.
2. Click **Import** in the top tab bar.

## Dropzone

The empty Import tab gives you two entry points: paste SVG or Lottie JSON into the input field, or drag a local file into the dashed dropzone.

<Image src="https://assets.docs.lottiefiles.com/static/7c576de22c-640.webp" alt="Empty Import tab with paste input and drag-and-drop upload area" caption="Import tab empty state" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/7c576de22c-640.webp 640w, https://assets.docs.lottiefiles.com/static/7c576de22c-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/7c576de22c-1920.webp 1920w" width="1920" height="1080" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAPoAAAD6AG1e1JrAAAATklEQVR4nGPwjUj5D8IGFvb/tQ3N/utZO4D5UPyPAcZR0jL8L6mkCqaRFPyHK1DXN/2vpK0PprEqAOmUUlbHbYKOud1/dUPz/3oWqG4AAIm6SbodpOK/AAAAAElFTkSuQmCC" />

- **Paste input** — paste SVG or Lottie JSON directly into the field.
- **Drag target** — drop a `.lottie`, `.json`, `.svg`, or `.zip` file here.
- **Click to open file picker** — clicking the dropzone area opens the system file picker.
- **Format hint** — text in the dropzone lists supported extensions.

Accepts: `.svg`, `.json`, `.lottie`, `.zip` (also `application/json` MIME type).

## Paste listener (global, within Import tab)

Pasting a Lottie URL anywhere within the Import tab triggers the URL-import flow. No visible button — paste detection is automatic via a clipboard listener. See [Importing from URL](/en/integrations/after-effects/03_import/importing-from-url) for accepted URL formats.

## Player preview

After a file is loaded.

- **Player** — plays the imported animation; loops by default. {/* [needs review] confirm loop default */}
- **Background color** — selectable backdrop colors to inspect the animation against different surfaces.
- **File metadata** — name, dimensions, duration shown below the player. {/* [needs review] confirm fields */}
- **Zoom controls** — hover the preview to reveal minus and plus buttons. Zoom ranges from 10% to 300% in 10% steps.
- **Pan when zoomed** — above 100%, drag the preview or use a two-finger trackpad gesture to move the enlarged animation. Movement is constrained to the preview boundaries, and preview clicks do not trigger playback or State Machine interactions. At 100% or below, the existing preview interactions remain available.
- **Resize handle** — drag to change the preview height when the handle is available.

{
  // TEMP_IMAGE_HIDDEN: Hidden for interim release. Restore this image in this same source location during visual QA.
  false ? (

  <Image
        src="/images/screenshots/ae-import-preview-controls-zoom.webp"
        alt="Close-up of the Import preview player controls, background color button, and speed and frame readout"
        caption="Import preview player controls"
        zoom
        variant="default"
      />
  ) : null
}

## Multi-animation carousel (multi-animation files only)

- **Thumbnail row** — one thumbnail per animation in the bundle.
- **Active selection** — highlights the currently previewed animation.
- **Scroll arrows** — when the bundle has more thumbnails than fit on screen.
- **Zoom and pan controls** — each active animation preview uses the same hover zoom and above-100% pan controls as a single-animation file. Panning does not move the carousel.

See [Working with multi-animation files](/en/integrations/after-effects/03_import/working-with-multi-animation) for the workflow.

## Footer

- **Insert** — adds the previewed animation to the active After Effects composition.
- **Reset / clear** — removes the loaded file and returns the dropzone state. {/* [needs review] confirm button label */}

## Sign-in banner

When you're signed out, a banner appears above the dropzone indicating that some features (saving to workspace, history) require sign-in. Importing itself works signed-out for public files.

## Related

- [Importing from file](/en/integrations/after-effects/03_import/importing-from-file) — drag-drop / picker workflow.
- [Importing from URL](/en/integrations/after-effects/03_import/importing-from-url) — paste workflow.