---
metadata:
- name: generator
content: Diplodoc Platform v5.54.5
alternate:
- https://divkit.tech/docs/en/concepts/animation.md
- https://divkit.tech/docs/ru/concepts/animation.md
- href: en/concepts/animation.md
type: text/markdown
title: Markdown version
- href: ../llms.txt
type: text/markdown
title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/en/llms.txt
# Animation
## Tap animation {#action-animation}
If an element has at least one tap action set, you can set up an animation for it in the `action_animation` field. The animation must be set to the `animation` type.
{% cut "View an interactive example" %}
{% endcut %}
## Transition animation {#transition-animation}
DivKit lets you set up a layout change with an automatic animation. The layout change occurs in one of two cases:
- `DivView#setData(DivData, DivDataTag)` call.
- State switch.
For the elements that should be animated, set the `id` and the required transition type:
- `transition_in`: Appearance of an element that isn't present in the old layout but is present in the new one.
- `transition_change`: Change of an element that is present in both old and new layouts. For example, this can be used to change the position or dimensions of an element.
- `transition_out`: Disappearance of an element that is present in the old layout but isn't present in the new one.
Transition animations use the [appearance-transition](https://divkit.tech/docs/en/concepts/divs/2/div-appearance-transition.md) type.
**Moving beyond the edge of an image**
: Use the [slide-transition](https://divkit.tech/docs/en/concepts/divs/2/div-slide-transition.md) element.
{% cut "View an interactive example" %}
{% endcut %}
**Changing transparency**
: Use the [fade-transition](https://divkit.tech/docs/en/concepts/divs/2/div-fade-transition.md) element.
{% cut "View an interactive example" %}
{% endcut %}
**Changing size**
: Use the [scale-transition](https://divkit.tech/docs/en/concepts/divs/2/div-scale-transition.md) element.
{% cut "View an interactive example" %}
{% endcut %}
**Combining multiple transitions**
: You can assign different kinds of transitions to one element by combining them into a `set`. To do this, use [appearance-set-transition](https://divkit.tech/docs/en/concepts/divs/2/div-appearance-set-transition.md).
{% cut "View an interactive example" %}
{% endcut %}
## Animated change of an element position {#change-transition-animation}
Set up an animation that changes the position of an element in the `transition_change` field. This animation will have the [change-transition](https://divkit.tech/docs/en/concepts/divs/2/div-change-transition.md) type.
{% cut "View an interactive example" %}
{% endcut %}
## Animators for changing variables {#animators}
You can configure animated changes to a variable value in the `animators` field. These animators can interact with various types of variables - [animator](https://divkit.tech/docs/en/concepts/divs/2/div-animator.md).
You should start and stop animators using actions [action-animator-start](https://divkit.tech/docs/en/concepts/divs/2/div-action-animator-start.md) and [action-animator-stop](https://divkit.tech/docs/en/concepts/divs/2/div-action-animator-stop.md). When using actions to interact with an animator that is located in another block, you can use `scope_id` in the [action](https://divkit.tech/docs/en/concepts/divs/2/div-action.md), where you specify the `id` of the div with the animator.
{% cut "View an interactive example" %}
{% endcut %}
## Animated images {#animated-images}
DivKit supports displaying animated images, including WebP animations, through the `gif` component. Animated images work on all platforms and can be used to create dynamic content.
**WebP animations**
: To display animated WebP images, use the `gif` component. The WebP format provides efficient compression and transparency support in animations.
{% cut "View an interactive example" %}
{% endcut %}
## Learn more {#troubleshooting}
You can discuss topics of interest in the DivKit user community in Telegram: [https://t.me/divkit_community_en](https://t.me/divkit_community_en).
[DivKit Repository](https://github.com/divkit/divkit)