MoveInAnimation
The animation whereby a component moves in from the side of the screen.
Declaration
object MoveInAnimationProperties
| Name | Type | Description |
|---|---|---|
type Required | string | This animation always has the type |
preferredStartingPosition | string | Indicates which side of the screen is the starting point of the animation. Valid values:
By default, the animation starts on the side that’s closest to the component. |
userControllable | boolean | Indicates whether the animation happens in response to user action ( |
Mentioned in
Discussion
With this animation type the component moves into view from the left or right side of the screen. Initially, the component is out of view as shown in this video.
You can configure a preferred starting position, but the position is not guaranteed. For example, if another component is blocking the preferred position, the MoveInAnimation attempts to start from the opposite side. If both sides are covered by other components, Apple News doesn’t apply the MoveInAnimation.
Example
{
"components": [
{
"role": "heading1",
"text": "2. Unbeatable Heat"
},
{
"role": "figure",
"URL": "bundle://figure.jpg",
"animation": {
"type": "move_in",
"preferredStartingPosition": "left"
}
}
]
}