# useAutoAnimate

*Category:* Utilities
*Section:* DOM behavior hooks
*Source:* https://uikit.developers.rio.cloud/#/utilities/useAutoAnimate
*Captured:* 2026-04-27T14:59:33.149Z

The useAutoAnimate hook is a thin re-export of the @formkit/auto-animate utility to quickly add enter/leave animations to a container. This page shows a simple example; for full configuration options, check the official documentation.

## useAutoAnimate

### Example: Ready for pickup

Add shipment Change layout Disable animation

Shipment #1001
Ready for pickup

Shipment #1002
In transit

Shipment #1003
Delivered

#### React (tsx)

```tsx
import { useState } from 'react';

import Avatar from '@rio-cloud/rio-uikit/Avatar';
import Button from '@rio-cloud/rio-uikit/Button';
import ButtonToolbar from '@rio-cloud/rio-uikit/ButtonToolbar';
import useAutoAnimate from '@rio-cloud/rio-uikit/useAutoAnimate';
import useToggle from '@rio-cloud/rio-uikit/useToggle';

export default () => {
    const { isToggled: isVertical, toggle: toggleLayout } = useToggle();

    const [shipments, setShipments] = useState([
        { id: 1001, title: 'Shipment #1001', status: 'Ready for pickup', icon: 'rioglyph-cube' },
        { id: 1002, title: 'Shipment #1002', status: 'In transit', icon: 'rioglyph-delivery' },
        { id: 1003, title: 'Shipment #1003', status: 'Delivered', icon: 'rioglyph-handshake' },
    ]);

    const [parent, enableAnimations] = useAutoAnimate();

    const addShipment = () => {
        const nextId = shipments.length ? Math.max(...shipments.map(shipment => shipment.id)) + 1 : 1001;
        setShipments([
            ...shipments,
            {
                id: nextId,
                title: `Shipment #${nextId}`,
                status: 'Created (awaiting carrier)',
                icon: 'rioglyph-cube-dashed',
            },
        ]);
    };

    const removeShipment = (id: number) => {
        setShipments(shipments.filter(shipment => shipment.id !== id));
    };

    return (
        <>
            <ButtonToolbar>
                <Button onClick={addShipment}>Add shipment</Button>
                <Button onClick={toggleLayout}>Change layout</Button>
                <Button onClick={() => enableAnimations(false)}>Disable animation</Button>
            </ButtonToolbar>
            <div
                ref={parent}
                className={`margin-top-15 max-width-300- display-flex flex-wrap gap-10 ${isVertical ? 'flex-row' : 'flex-column'}`}
            >
                {shipments.map(shipment => (
                    <div
                        key={shipment.id}
                        className='width-300 height-70 bg-white shadow-subtle display-flex gap-10 align-items-center justify-content-between border rounded padding-x-10 padding-y-15'
                    >
                        <div>
                            <Avatar
                                className='text-color-darker text-size-16 bg-lightest scale-90'
                                iconName={`rioglyph ${shipment.icon}`}
                            />
                        </div>
                        <div className='flex-1-1'>
                            <div className='text-medium'>{shipment.title}</div>
                            <div className='text-color-dark'>{shipment.status}</div>
                        </div>
                        <Button
                            bsSize='xs'
                            bsStyle='muted'
                            iconOnly
                            iconName='rioglyph-remove'
                            onClick={() => removeShipment(shipment.id)}
                        />
                    </div>
                ))}
            </div>
        </>
    );
};
```

#### HTML (html)

```html
<div class="btn-toolbar">
    <button type="button" class="btn btn-default btn-component" tabindex="0">Add shipment</button>
    <button type="button" class="btn btn-default btn-component" tabindex="0">Change layout</button>
    <button type="button" class="btn btn-default btn-component" tabindex="0">Disable animation</button>
</div>
<div class="margin-top-15 max-width-300- display-flex flex-wrap gap-10 flex-column" style="position: relative;">
    <div class="width-300 height-70 bg-white shadow-subtle display-flex gap-10 align-items-center justify-content-between border rounded padding-x-10 padding-y-15">
        <div>
            <div class="Avatar bg-lighter text-color-darker text-size-16 bg-lightest scale-90" style="height: 40px;">
                <span class="Avatar-icon rioglyph rioglyph-rioglyph rioglyph-cube ">
                </span>
            </div>
        </div>
        <div class="flex-1-1">
            <div class="text-medium">Shipment #1001</div>
            <div class="text-color-dark">Ready for pickup</div>
        </div>
        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component" tabindex="0">
            <span class="rioglyph rioglyph-remove">
            </span>
        </button>
    </div>
    <div class="width-300 height-70 bg-white shadow-subtle display-flex gap-10 align-items-center justify-content-between border rounded padding-x-10 padding-y-15">
        <div>
            <div class="Avatar bg-lighter text-color-darker text-size-16 bg-lightest scale-90" style="height: 40px;">
                <span class="Avatar-icon rioglyph rioglyph-rioglyph rioglyph-delivery ">
                </span>
            </div>
        </div>
        <div class="flex-1-1">
            <div class="text-medium">Shipment #1002</div>
            <div class="text-color-dark">In transit</div>
        </div>
        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component" tabindex="0">
            <span class="rioglyph rioglyph-remove">
            </span>
        </button>
    </div>
    <div class="width-300 height-70 bg-white shadow-subtle display-flex gap-10 align-items-center justify-content-between border rounded padding-x-10 padding-y-15">
        <div>
            <div class="Avatar bg-lighter text-color-darker text-size-16 bg-lightest scale-90" style="height: 40px;">
                <span class="Avatar-icon rioglyph rioglyph-rioglyph rioglyph-handshake ">
                </span>
            </div>
        </div>
        <div class="flex-1-1">
            <div class="text-medium">Shipment #1003</div>
            <div class="text-color-dark">Delivered</div>
        </div>
        <button type="button" class="btn btn-muted btn-xs btn-icon-only btn-component" tabindex="0">
            <span class="rioglyph rioglyph-remove">
            </span>
        </button>
    </div>
</div>
```

#### Props: Parameters

### Parameters

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| options | AutoAnimateOptions (optional) | — | Forwarded to @formkit/auto-animate to configure duration, easing, animations, etc. |

#### Props: Returns

### Returns

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| parent | RefCallback<HTMLElement> | — | Attach to the container whose children should animate. |
| enableAnimations | (enabled?: boolean) => void | — | Toggle animations on or off; pass false to disable temporarily. |