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:
        | "0 0"
        | `0 ${number}px`
        | `0 ${number}rem`
        | `0 ${number}%`
        | `${number}px 0`
        | `${number}px ${number}px`
        | `${number}px ${number}rem`
        | `${number}px ${number}%`
        | `${number}rem 0`
        | `${number}rem ${number}px`
        | `${number}rem ${number}rem`
        | `${number}rem ${number}%`
        | `${number}% 0`
        | `${number}% ${number}px`
        | `${number}% ${number}rem`
        | `${number}% ${number}%`;
    targetOffset:
        | "0 0"
        | `0 ${number}px`
        | `0 ${number}rem`
        | `0 ${number}%`
        | `${number}px 0`
        | `${number}px ${number}px`
        | `${number}px ${number}rem`
        | `${number}px ${number}%`
        | `${number}rem 0`
        | `${number}rem ${number}px`
        | `${number}rem ${number}rem`
        | `${number}rem ${number}%`
        | `${number}% 0`
        | `${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:
    | "0 0"
    | `0 ${number}px`
    | `0 ${number}rem`
    | `0 ${number}%`
    | `${number}px 0`
    | `${number}px ${number}px`
    | `${number}px ${number}rem`
    | `${number}px ${number}%`
    | `${number}rem 0`
    | `${number}rem ${number}px`
    | `${number}rem ${number}rem`
    | `${number}rem ${number}%`
    | `${number}% 0`
    | `${number}% ${number}px`
    | `${number}% ${number}rem`
    | `${number}% ${number}%`

determines offsets to apply to both X and Y positional components

Example

// move 12px right and 50% of own height down
{selfOffset: "12px 50%"}

targetOffset

targetOffset:
    | "0 0"
    | `0 ${number}px`
    | `0 ${number}rem`
    | `0 ${number}%`
    | `${number}px 0`
    | `${number}px ${number}px`
    | `${number}px ${number}rem`
    | `${number}px ${number}%`
    | `${number}rem 0`
    | `${number}rem ${number}px`
    | `${number}rem ${number}rem`
    | `${number}rem ${number}%`
    | `${number}% 0`
    | `${number}% ${number}px`
    | `${number}% ${number}rem`
    | `${number}% ${number}%`

offset with respect to target's left and top bound

Example

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

Settings

Member Visibility

On This Page

Properties