React Common - Object Structures - animationConfig - to

Specifies a final animation state. Use the from property to specify an initial state.

Type: AnimationState
Default Value: {}

The values that this property accepts depend on the specified animation type. The following list illustrates the dependency:

  • "fade"
    Supported properties: opacity

    JavaScript
    {
    type: "fade",
    from: 0,
    to: 1,
    // ===== or =====
    from: { opacity: 0 },
    to: { opacity: 1 }
}

  • "pop"
    Supported properties: opacity, scale

    JavaScript
    {
    type: "pop",
    from: { opacity: 0, scale: 0 },
    to: { opacity: 1, scale: 1 }
}

  • "slide"
    Supported properties: opacity, position, top, left

    JavaScript
    {
    type: "slide",
    from: { opacity: 0, top: 100 },
    to: {
        opacity: 1,
        position: {
            my: "top",
            at: "bottom",
            of: "#targetElement"
        }
    }
}

  • "сss"
    Supported properties: none (use custom CSS classes)
    To apply more than one classes, separate them by comma.

    JavaScript
    CSS
    {
    type: "css",
    from: "transparent",
    to: "opaque, font-large"
}
    .transparent {
    opacity: 0;
}
.opaque {
    opacity: 1;
}
.font-large {
    font-size: 24pt
}

left

A shortcut that positions the element's left side relative to the parent element.

Type:

Number

The following example shows how to use this property:

JavaScript
// Positions the element's left side along the parent element's left side
left: 0,

// Shifts the element 100 pixels to the right relative to the parent element
left: 100,

// Shifts the element 100 pixels to the left relative to the parent element
left: -100

If you need to specify the element's position in greater detail, use the position property.

See Also

opacity

Element opacity.

Type:

Number

The following example shows how to use this property:

JavaScript
// Transparent element
opacity: 0,

// Opaque element
opacity: 1

position

Element position.

Type:

PositionConfig

For more information and code examples, refer to the PositionConfig help section. In simpler use cases, you can use the left and top properties as an alternative.

scale

A value that controls element size.

Type:

Number

The following example shows how to use this property:

JavaScript
// Hide the element
scale: 0,

// Display the element in its original size (100%)
scale: 1,

// Scale the element up to 150%
scale: 1.5

top

A shortcut that positions the element's top side relative to the parent element.

Type:

Number

The following example shows how to use this property:

JavaScript
// Positions the element's top side along the parent element's top side
top: 0,

// Shifts the element 100 pixels down relative to the parent element
top: 100,

// Shifts the element 100 pixels up relative to the parent element
top: -100

If you need to specify the element's position in greater detail, use the position property.

See Also