Interface TranslateOptions

Options 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

Properties

selfOffset translate

Properties

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

  • the offset is applied after alignment is applied
  • string in the form "CssLength CssLength"

Example

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

translate

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}%`

distances to travel in the X and Y directions

Example

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

Settings

Member Visibility

On This Page

Properties