webchalk-animate - v0.31.0
    Preparing search index...

    Interface MoveToOptions

    An options object 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
    Index

    Properties

    alignment preserveX preserveY selfOffset targetOffset

    Properties

    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: boolean

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

    preserveY: boolean

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

    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.

    // move 12px right and 50% of own height down
    {selfOffset: "12px 50%"}
    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}%`

    The offset with respect to the target's left and top bound.

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

    Settings

    Member Visibility

    On This Page

    Properties