---
title: 'Iterate.AnimatedContainer'
description: '`Iterate.AnimatedContainer` can be used to animate items when they are added or removed.'
version: 11.3.0
generatedAt: 2026-05-19T08:44:42.367Z
checksum: aa35ac720365e3ad296f4e4665e72d5667c8d1b317fc96523207e2a2ecdd5aae
---

# Iterate.AnimatedContainer

## Import

```tsx
import { Iterate } from '@dnb/eufemia/extensions/forms'
render(<Iterate.AnimatedContainer />)
```

## Description

`Iterate.AnimatedContainer` can be used to animate items when they are added or removed. It provides a smooth transition effect for a better user experience.

## Relevant links

- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/extensions/forms/Iterate/AnimatedContainer)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Iterate/AnimatedContainer)

```tsx
import { Iterate } from '@dnb/eufemia/extensions/forms'

render(
  <Iterate.Array>
    <Iterate.AnimatedContainer>Item Content</Iterate.AnimatedContainer>
  </Iterate.Array>
)
```

## The item number in the title

You can use the `{itemNo}` variable in the `title` or the `titleWhenNew` property to display the current item number.

```tsx
import { Iterate, Field, Value } from '@dnb/eufemia/extensions/forms'

render(
  <Iterate.Array>
    <Iterate.AnimatedContainer title="Item {itemNo}">
      <Field.Name.Last itemPath="/name" />
    </Iterate.AnimatedContainer>
  </Iterate.Array>
)
```

## Accessibility

The `Iterate.AnimatedContainer` component has an `aria-label` attribute, which is set to the `title` property value. It uses a section element to wrap the content, which helps users with screen readers to get the needed announcement.


## Demos


```tsx
const MyForm = () => {
  const {
    count
  } = Iterate.useCount('myForm');
  return <Form.Handler defaultData={{
    myList: ['Item 1']
  }} id="myForm">
              <Form.Card>
                <Iterate.Array path="/myList" placeholder={<>Empty list</>} animate>
                  <Iterate.AnimatedContainer title="Title {itemNo}">
                    <Field.String label="Label" itemPath="/" />

                    <Iterate.Toolbar>
                      <Iterate.RemoveButton />
                    </Iterate.Toolbar>
                  </Iterate.AnimatedContainer>
                </Iterate.Array>

                <Iterate.PushButton path="/myList" pushValue={`Item ${String(count('/myList') + 1)}`} text="Add new item" />
              </Form.Card>
            </Form.Handler>;
};
render(<MyForm />);
```

## Properties


```json
{
  "props": {
    "title": {
      "doc": "The title of the container.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "titleWhenNew": {
      "doc": "The title for a new item.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "variant": {
      "doc": "Defines the variant of the container. Can be `outline`, `filled` or `basic`. Defaults to `outline`.",
      "type": [
        "\"outline\"",
        "\"filled\"",
        "\"basic\""
      ],
      "status": "optional"
    },
    "toolbar": {
      "doc": "An alternative toolbar to be shown in the container.",
      "type": "React.ReactNode",
      "status": "optional"
    },
    "toolbarVariant": {
      "doc": "Use variants to render the toolbar differently. Currently there are the `minimumOneItem` and `custom` variants. See the info section for more info.",
      "type": [
        "\"minimumOneItem\"",
        "\"custom\""
      ],
      "status": "optional"
    },
    "open": {
      "doc": "If the container should be open or not. This is taken care of internally by default.",
      "type": "boolean",
      "status": "optional"
    },
    "[FlexVertical](/uilib/layout/flex/container/properties)": {
      "doc": "All Flex.Vertical properties.",
      "type": "Various",
      "status": "optional"
    }
  }
}
```