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

    Interface TranslateOptions

    An options object for the translate animation.

    interface TranslateOptions {
        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}%`;
        translate: | "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
      • TranslateOptions
    Index

    Properties

    selfOffset translate

    Properties

    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.

    • The offset is applied after alignment is applied.
    • It is a string in the form "CssLength CssLength".
    // move 12px right and 50% of own height down
    {selfOffset: "12px 50%"}
    translate:
        | "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 distances to travel in the X and Y directions.

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

    Settings

    Member Visibility

    On This Page

    Properties