> For the complete documentation index, see [llms.txt](https://intercode.gitbook.io/intercode-saas-kit/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://intercode.gitbook.io/intercode-saas-kit/animation-and-styles/framer-motion.md).

# Framer Motion

### Credits

All the base examples of the animations and overall how this work you can find on their official documentation [here](https://www.framer.com/motion/).

In this block we just briefly take a look how this animation set in our project.

### Requirement

First of all we need to install package: 

```json
"framer-motion": "^11.3.2",
```

### Example

In file we import:

```javascript
import { AnimatePresence, motion } from 'framer-motion';
```

{% hint style="warning" %}
N.B. AnimatePresence not always necessary.
{% endhint %}

Base usage on example in Lead Statuses Settings:

```javascript
<motion.div key="edit" {...statusesForm} className="tour-statuses-list">
        <DndContext sensors={sensors} collisionDetection={closestCorners} onDragEnd={handleDragEnd}>
                <StatusesList statuses={statuses} />
        </DndContext>
</motion.div>
```

or more complicated example just lower in the code:

```javascript
<AnimatePresence mode="wait">
                {mode === 'edit' && (
                    <motion.div key="edit" {...statusesForm}>
                        <EditStatus
                            t={t}
                            statuses={statuses}
                            colors={colors}
                            handleUpdateStatus={handleUpdateStatus}
                            handleOpenDeleteModal={handleOpenDeleteModal}
                            loading={loading}
                        />
                    </motion.div>
                )}
                {mode === 'add' && (
                    <motion.div key="add" {...statusesForm}>
                        <AddStatus t={t} colors={colors} handleCreateStatus={handleCreateStatus} loading={loading} />
                    </motion.div>
                )}
</AnimatePresence>
```

From this example we can understand that render switches on display based on different conditions. Animation make experience of UI usage more smooth.

### Helpers

You may notice this thing in component code:

```javascript
{...statusesForm}
```

Such code you can find in ***.../ui/src/common/animationVariants/***

As you can see, in that folder we stores other animation variants.

Just go there and try it!