Interface MoveToOptions

Options for the move-to animation.

interface MoveToOptions {
    alignment:
        | "center center"
        | "center top"
        | "center bottom"
        | "left center"
        | "left top"
        | "left bottom"
        | "right center"
        | "right top"
        | "right bottom";
    preserveX: boolean;
    preserveY: boolean;
    selfOffset:
        | `${number}px, ${number}px`
        | `${number}px, ${number}rem`
        | `${number}px, ${number}%`
        | `${number}rem, ${number}px`
        | `${number}rem, ${number}rem`
        | `${number}rem, ${number}%`
        | `${number}%, ${number}px`
        | `${number}%, ${number}rem`
        | `${number}%, ${number}%`;
    targetOffset:
        | `${number}px, ${number}px`
        | `${number}px, ${number}rem`
        | `${number}px, ${number}%`
        | `${number}rem, ${number}px`
        | `${number}rem, ${number}rem`
        | `${number}rem, ${number}%`
        | `${number}%, ${number}px`
        | `${number}%, ${number}rem`
        | `${number}%, ${number}%`;
}

Hierarchy

  • TranslationOffset
    • MoveToOptions

Properties

alignment preserveX preserveY selfOffset targetOffset

Properties

alignment

alignment:
    | "center center"
    | "center top"
    | "center bottom"
    | "left center"
    | "left top"
    | "left bottom"
    | "right center"
    | "right top"
    | "right bottom"

determines horizontal and vertical alignment with target element

preserveX

preserveX: boolean

if true, there will be no horizontal translation with respect to the target element (offsets still apply)

preserveY

preserveY: boolean

if true, there will be no vertical translation with respect to the target element (offsets still apply)

selfOffset

selfOffset:
    | `${number}px, ${number}px`
    | `${number}px, ${number}rem`
    | `${number}px, ${number}%`
    | `${number}rem, ${number}px`
    | `${number}rem, ${number}rem`
    | `${number}rem, ${number}%`
    | `${number}%, ${number}px`
    | `${number}%, ${number}rem`
    | `${number}%, ${number}%`

determines offsets to apply to both X and Y positional components

Example

{selfOffset: "12px, 50%"}

targetOffset

targetOffset:
    | `${number}px, ${number}px`
    | `${number}px, ${number}rem`
    | `${number}px, ${number}%`
    | `${number}rem, ${number}px`
    | `${number}rem, ${number}rem`
    | `${number}rem, ${number}%`
    | `${number}%, ${number}px`
    | `${number}%, ${number}rem`
    | `${number}%, ${number}%`

offset with respect to target's left and top bound

Example

{targetOffset: "12px, 50%"} // move 12px right and 50% of target element's height down

Settings

Member Visibility

On This Page

Properties