---
title: Animations
path: /v6/animations/
index: 7
---

import ImageTransition from '../../components/examples/ImageTransition';
import TextTransition from '../../components/examples/TextTransition';

Tippies use an opacity `fade` transition by default.

### Included animations

The package comes with extra animations for you to use:

- `shift-away`
- `shift-toward`
- `scale`
- `perspective`

They need to be
[imported separately](../getting-started/#optional-extra-imports).

```js
import 'tippy.js/animations/scale.css';
```

Pass the animation name as the `animation` prop:

```js
tippy('button', {
  animation: 'scale',
});
```

Each of these animations also has 3 variants (normal, subtle, and extreme) using
the following format:

```js
import 'tippy.js/animations/scale.css';
import 'tippy.js/animations/scale-subtle.css';
import 'tippy.js/animations/scale-extreme.css';
```

### Custom animations

To create your own animation:

- Specify the animation name in the `[data-animation]` attribute selector
- Target the visibility state of the tippy: `[data-state="hidden"]` or
  `[data-state="visible"]`
- Depending on the animation, target the placement of the tippy too: e.g.
  `[data-placement^="top"]`

```css
.tippy-box[data-animation='rotate'][data-state='hidden'] {
  opacity: 0;
  transform: rotate(90deg);
}
```

```js
tippy('button', {
  animation: 'rotate',
});
```

### Inertia

There's a prop named `inertia` that adds an elastic inertial effect to the
tippy, which is a limited CSS-only way to mimic spring physics.

```js
tippy('button', {
  inertia: true,
});
```

You can customize this prop in your CSS:

```css
.tippy-box[data-inertia][data-state='visible'] {
  transition-timing-function: cubic-bezier(...);
}
```

### Material filling effect

[Seen here](../../#material-filling-effect).

Import the `animateFill` plugin, plus `dist/backdrop.css` &
`animations/shift-away.css` stylesheets.

```js
import tippy, {animateFill} from 'tippy.js';
import 'tippy.js/dist/backdrop.css';
import 'tippy.js/animations/shift-away.css';

tippy(targets, {
  animateFill: true,
  plugins: [animateFill],
});
```

### CSS animations

Maybe plain transitions aren't enough for your use case. You can also use CSS
animations (e.g. `animate.css`):

```js
tippy('button', {
  onMount(instance) {
    const box = instance.popper.firstElementChild;
    requestAnimationFrame(() => {
      box.classList.add('animated');
      box.classList.add('wobble');
    });
  },
  onHidden(instance) {
    const box = instance.popper.firstElementChild;
    box.classList.remove('animated');
    box.classList.remove('wobble');
  },
});
```

You can also use `@keyframes` and add the `animation` property to your animation
selector too.

<!--
### Dimensions transition

While a tippy is showing, the content inside of it may change. How do you
smoothly transition its dimensions? By default, it instantly changes size when
the content is updated. It turns out this is quite complex to do, but possible.

#### Partially dynamic

View the [CodePen demo](https://codepen.io/atomiks/pen/LgjMbW).

#### Fully dynamic

<Demo>
  <span>
    <ImageTransition />
  </span>
  <TextTransition />
</Demo>

Code for fully dynamic transitions is still being developed and it is highly
experimental at this stage. The documentation will be updated once it's ready.
-->