Animation

  1. Tap animation
  2. Transition animation
  3. Animated change of an element position
  4. Learn more

Tap 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.

View an interactive example

Transition animation

DivKit lets you set up a layout change with an automatic animation. The layout change occurs in one of two cases:

  • Calling DivView#setData(DivData, DivDataTag).
  • State switch.

For the elements that should be animated, set the id and the required transition type:

  • transition_in: The element transition type for elements that weren't present in the old layout, but are present in the new layout.
  • transition_change: The element transition type for elements that are present in both old and new layouts. For example, this can be used to change the position or dimensions of an element.
  • transition_out: The element transition type that makes elements disappear if they are only present in the old layout.

Transition animations use the appearance-transition type.

Moving beyond the edge of an image

Use the slide-transition element.

View an interactive example
Changing transparency

Use the fade-transition element.

View an interactive example
Changing size

Use the scale-transition element.

View an interactive example
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.

View an interactive example

Animated change of an element position

Set up an animation that changes the position of an element in the transition_change field. This animation will have the change-transition type.

View an interactive example

Learn more

Follow DivKit news in the Telegram channel: http://t.me/divkit_news

You can also discuss topics of interest in the DivKit user community in Telegram: https://t.me/divkit_community_ru

DivKit Repository