Contents

ScaleFadeAnimation

The animation in which a component scales up and fades into view.

Declaration

object ScaleFadeAnimation

Properties

NameTypeDescription
type Requiredstring

This animation always has the type scale_fade.

initialAlphanumber

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

initialScalenumber

The initial scale of the component (and the animation). Set initialScale to a value between 0 (completely scaled down) and 1 (the component’s original size).

userControllableboolean

Indicates whether the animation happens in response to user action (true) or happens automatically (false).

Mentioned in

Discussion

With this animation type the component appears by getting larger and fading from transparent to opaque. Initially, the component is scaled down and at least partially transparent, but, upon entering the user’s view, the component scales up to its actual size in the layout and fades in to be completely opaque as shown in this video.

Example

{
  "components": [
    {
      "role": "figure",
      "URL": "bundle://figure.jpg",
      "animation": {
        "type": "scale_fade",
        "initialAlpha": 0.5,
        "initialScale": 0.75
      }
    }
  ]
}

See Also

Related Documentation

Animations