# Animations

*Category:* Components
*Section:* Content
*Source:* https://uikit.developers.rio.cloud/#/components/animations
*Captured:* 2026-04-27T14:57:51.920Z

The UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.

## Animations

The official documentation can be found here https://motion.dev/docs/react

### Example: Example 1

Some Data
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

#### React (tsx)

```tsx
import { motion } from '@rio-cloud/rio-uikit/motion';

import { dummyText } from '../../../utils/data';

export default () => {
    return (
        <motion.div
            animate={{ opacity: [1, 0, 1] }}
            transition={{
                // Keyframes that match to the keyframes of the opacity settings above
                times: [0, 0.5, 1],
                repeat: Number.POSITIVE_INFINITY,
                ease: 'easeInOut',
                duration: 2.5,
                repeatDelay: 2,
            }}
        >
            <div className='margin-10'>
                <label>Some Data</label>
                <div>{dummyText}</div>
            </div>
        </motion.div>
    );
};
```

#### HTML (html)

```html
<div style="opacity: 0.893219;">
    <div class="margin-10">
        <label>Some Data</label>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
    </div>
</div>
```

### Example: Example 2



#### React (tsx)

```tsx
import { motion } from '@rio-cloud/rio-uikit/motion';
import type { ComponentProps } from 'react';

const icons = {
    check: {
        d: 'M5 13l4 4L19 7',
    },
    arrowRight: {
        d: 'M14 5l7 7m0 0l-7 7m7-7H3',
    },
    externalLink: {
        d: 'M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14',
    },
};

type IconName = keyof typeof icons;

type AnimatedIconProps = ComponentProps<'svg'> & {
    icon?: IconName;
    delay?: number;
};

const AnimatedIcon = (props: AnimatedIconProps) => {
    const { icon = 'check', delay = 0.2, ...remainingProps } = props;
    return (
        <svg
            {...remainingProps}
            className='w-6 h-6'
            fill='none'
            stroke='currentColor'
            viewBox='0 0 24 24'
            xmlns='http://www.w3.org/2000/svg'
        >
            <motion.path
                key={icon}
                initial={{ pathLength: 0 }}
                animate={{ pathLength: 1 }}
                transition={{ duration: 0.5, delay, type: 'tween', ease: 'easeOut' }}
                strokeLinecap='round'
                strokeLinejoin='round'
                strokeWidth='2'
                {...icons[icon]}
            />
        </svg>
    );
};

const container = {
    hidden: { opacity: 0 },
    show: {
        opacity: 1,
        transition: {
            staggerChildren: 0.2,
        },
    },
};

const item = {
    hidden: { opacity: 0 },
    show: { opacity: 1 },
};

export default () => (
    <>
        <motion.div
            variants={container}
            initial='hidden'
            animate='show'
            className='display-flex gap-20 text-color-darker'
        >
            <motion.div key='1' variants={item}>
                <AnimatedIcon key='arrowRight' delay={0.2} icon='arrowRight' width='50' height='50' />
            </motion.div>
            <motion.div key='2' variants={item}>
                <AnimatedIcon key='check' delay={0.4} icon='check' width='50' height='50' />
            </motion.div>
            <motion.div key='3' variants={item}>
                <AnimatedIcon key='externalLink' delay={0.8} icon='externalLink' width='50' height='50' />
            </motion.div>
        </motion.div>
    </>
);
```

#### HTML (html)

```html
<div class="display-flex gap-20 text-color-darker" style="opacity: 1;">
    <div style="opacity: 1;">
        <svg width="50" height="50" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" pathLength="1" stroke-dashoffset="0" stroke-dasharray="1 1">
            </path>
        </svg>
    </div>
    <div style="opacity: 1;">
        <svg width="50" height="50" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" pathLength="1" stroke-dashoffset="0" stroke-dasharray="0.9294828514393885 1">
            </path>
        </svg>
    </div>
    <div style="opacity: 1;">
        <svg width="50" height="50" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" pathLength="1" stroke-dashoffset="0" stroke-dasharray="0 1">
            </path>
        </svg>
    </div>
</div>
```

### Example: Example 3

Add Item Item IAR07Q32FDL

Item 8QCRTQ3YH2

Item EFVUWAQJLM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

#### React (tsx)

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

import { AnimatePresence, motion } from '@rio-cloud/rio-uikit/motion';
import Button from '@rio-cloud/rio-uikit/Button';

import { dummyText } from '../../../utils/data';

const getRandomString = () => (Math.random() + 1).toString(36).toUpperCase().substring(2);
const generateItems = (length: number) => Array.from({ length }, () => getRandomString());

export default () => {
    const [items, setItems] = useState([...generateItems(3)]);

    const handleAddItem = () => setItems(items => [...items, getRandomString()]);
    const handleRemoveItem = (item: string) => setItems(items => items.filter(i => i !== item));

    return (
        <div>
            <Button onClick={handleAddItem}>Add Item</Button>
            <div className='border rounded bg-white padding-15 margin-top-25 overflow-hidden'>
                <AnimatePresence>
                    {items.map(item => (
                        <motion.div
                            key={item}
                            initial={{ height: 0 }}
                            animate={{ height: 'auto' }}
                            exit={{ height: 0 }}
                        >
                            <motion.div
                                initial={{ opacity: 0 }}
                                animate={{ opacity: 1 }}
                                exit={{ opacity: 0 }}
                                transition={{
                                    opacity: { duration: 0.1 },
                                }}
                            >
                                <div className='display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only'>
                                    <div>Item {item}</div>
                                    <Button onClick={() => handleRemoveItem(item)} bsStyle='muted' bsSize='sm' iconOnly>
                                        <span className='rioglyph rioglyph-remove text-size-14' />
                                    </Button>
                                </div>
                            </motion.div>
                        </motion.div>
                    ))}
                </AnimatePresence>
            </div>
            <div className='margin-top-15'>{dummyText}</div>
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <button type="button" class="btn btn-default btn-component" tabindex="0">Add Item</button>
    <div class="border rounded bg-white padding-15 margin-top-25 overflow-hidden">
        <div style="height: auto;">
            <div style="opacity: 1;">
                <div class="display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only">
                    <div>Item IAR07Q32FDL</div>
                    <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component" tabindex="0">
                        <span class="rioglyph rioglyph-remove text-size-14">
                        </span>
                    </button>
                </div>
            </div>
        </div>
        <div style="height: auto;">
            <div style="opacity: 1;">
                <div class="display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only">
                    <div>Item 8QCRTQ3YH2</div>
                    <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component" tabindex="0">
                        <span class="rioglyph rioglyph-remove text-size-14">
                        </span>
                    </button>
                </div>
            </div>
        </div>
        <div style="height: auto;">
            <div style="opacity: 1;">
                <div class="display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only">
                    <div>Item EFVUWAQJLM</div>
                    <button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component" tabindex="0">
                        <span class="rioglyph rioglyph-remove text-size-14">
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="margin-top-15">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.</div>
</div>
```

### Example: Example 4

Load Items Item KDQ20F8ANB

Item 0GHO5M48WH

Item Y0653RI8HK

Item YQM8A4TWMJ

Item 6BTIZQ3HCS

Item C6HLMLK7N1

#### React (tsx)

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

import { AnimatePresence, motion } from '@rio-cloud/rio-uikit/motion';
import Button from '@rio-cloud/rio-uikit/Button';
import Checkbox from '@rio-cloud/rio-uikit/Checkbox';

const getRandomString = () => (Math.random() + 1).toString(36).toUpperCase().substring(2);
const generateItems = () => Array.from({ length: 6 }, () => getRandomString());

export default () => {
    const [items, setItems] = useState([...generateItems()]);

    const handleGenerateItem = () => setItems(generateItems());

    return (
        <div>
            <Button onClick={handleGenerateItem}>Load Items</Button>
            <ul className='list-group margin-top-25 width-300'>
                <AnimatePresence initial={false}>
                    {items.map((item, index) => (
                        <motion.li
                            key={item}
                            variants={{
                                hidden: { opacity: 0, y: -50 },
                                visible: index => ({
                                    opacity: 1,
                                    y: 0,
                                    transition: {
                                        delay: index * 0.1,
                                    },
                                }),
                            }}
                            initial='hidden'
                            animate='visible'
                            custom={index}
                        >
                            <Checkbox className='list-group-item margin-bottom-10'>
                                <div className='display-flex gap-5'>
                                    <span>Item {item}</span>
                                </div>
                            </Checkbox>
                        </motion.li>
                    ))}
                </AnimatePresence>
            </ul>
        </div>
    );
};
```

#### HTML (html)

```html
<div>
    <button type="button" class="btn btn-default btn-component" tabindex="0">Load Items</button>
    <ul class="list-group margin-top-25 width-300">
        <li style="opacity: 1; transform: none;">
            <label class="checkbox list-group-item margin-bottom-10" tabindex="0">
                <input type="checkbox" class="list-group-item margin-bottom-10">
                <span class="checkbox-text">
                    <span>
                        <div class="display-flex gap-5">
                            <span>Item KDQ20F8ANB</span>
                        </div>
                    </span>
                </span>
            </label>
        </li>
        <li style="opacity: 1; transform: none;">
            <label class="checkbox list-group-item margin-bottom-10" tabindex="0">
                <input type="checkbox" class="list-group-item margin-bottom-10">
                <span class="checkbox-text">
                    <span>
                        <div class="display-flex gap-5">
                            <span>Item 0GHO5M48WH</span>
                        </div>
                    </span>
                </span>
            </label>
        </li>
        <li style="opacity: 1; transform: none;">
            <label class="checkbox list-group-item margin-bottom-10" tabindex="0">
                <input type="checkbox" class="list-group-item margin-bottom-10">
                <span class="checkbox-text">
                    <span>
                        <div class="display-flex gap-5">
                            <span>Item Y0653RI8HK</span>
                        </div>
                    </span>
                </span>
            </label>
        </li>
        <li style="opacity: 1; transform: none;">
            <label class="checkbox list-group-item margin-bottom-10" tabindex="0">
                <input type="checkbox" class="list-group-item margin-bottom-10">
                <span class="checkbox-text">
                    <span>
                        <div class="display-flex gap-5">
                            <span>Item YQM8A4TWMJ</span>
                        </div>
                    </span>
                </span>
            </label>
        </li>
        <li style="opacity: 1; transform: none;">
            <label class="checkbox list-group-item margin-bottom-10" tabindex="0">
                <input type="checkbox" class="list-group-item margin-bottom-10">
                <span class="checkbox-text">
                    <span>
                        <div class="display-flex gap-5">
                            <span>Item 6BTIZQ3HCS</span>
                        </div>
                    </span>
                </span>
            </label>
        </li>
        <li style="opacity: 1; transform: none;">
            <label class="checkbox list-group-item margin-bottom-10" tabindex="0">
                <input type="checkbox" class="list-group-item margin-bottom-10">
                <span class="checkbox-text">
                    <span>
                        <div class="display-flex gap-5">
                            <span>Item C6HLMLK7N1</span>
                        </div>
                    </span>
                </span>
            </label>
        </li>
    </ul>
</div>
```