Animation
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:
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 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
Animators for changing variables
You can configure animated changes to a variable value in the animators field. These animators can interact with various types of variables - animator.
You should start and stop animators using actions action-animator-start and action-animator-stop. When using actions to interact with an animator that is located in another block, you can use scope_id in the action, where you specify the id of the div with the animator.
View an interactive example
Learn more
You can discuss topics of interest in the DivKit user community in Telegram: https://t.me/divkit_community_en.