React Common - Object Structures - animationConfig - from

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
  }

The following example shows how to use this property:

// 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

• top

The following example shows how to use this property:

// Transparent element
opacity: 0,

// Opaque element
opacity: 1

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.

The following example shows how to use this property:

// Hide the element
scale: 0,

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

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

The following example shows how to use this property:

// 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

• left