Object

ScaleFadeAnimation

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

Properties

type
string
(Required)

This animation always has the type scale_fade.

initialAlpha
number

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

initialScale
number

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

userControllable
boolean

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

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 } } ]}

Relationships

Inherits From

See Also

Animations

About Component Animations

Learn how to affect the way in which components come into view.

object ComponentAnimation

Properties shared by all the animations.

object AppearAnimation

The animation whereby a component appears on the screen.

object FadeInAnimation

The animation whereby a component fades into view.

object MoveInAnimation

The animation whereby a component moves in from the side of the screen.