Contents

FadeInAnimation

The animation whereby a component fades into view.

Declaration

object FadeInAnimation

Properties

NameTypeDescription
type Requiredstring

This animation always has the type fade_in.

initialAlphanumber

The initial transparency of the component (and the animation). Set initialAlpha to a value between 0 (completely transparent) and 1 (completely visible).

userControllableboolean

Indicates whether user action like scrolling controls the animation (true), or the animation happens when the component is within the visible area of the document (false).

Mentioned in

Discussion

With this animation type the component fades in as it enters the person’s view. The initial transparency (alpha value) of the component is configurable. A FadeInAnimation with the userControllable property set to true is shown in this video.

Example

{
  "components": [
    {
      "role": "heading1",
      "text": "2. Unbeatable Heat"
    },
    {
      "role": "figure",
      "URL": "bundle://figure.jpg",
      "animation": {
        "type": "fade_in",
        "userControllable": false,
        "initialAlpha": 0
      }
    }
  ]
}

See Also

Related Documentation

Animations