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.

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