Motion

import { motionPresets } from "@metalaunchlabs/ui" · every preset respects reduced motion through useMotionAllowed.

• EASE_IN_OUT

  [
    0.65,
    0,
    0.35,
    1
  ]

• EASE_OUT

  [
    0.16,
    1,
    0.3,
    1
  ]

• fadeIn

  {
    "hidden": {
      "opacity": 0
    },
    "visible": {
      "opacity": 1,
      "transition": {
        "duration": 0.5,
        "ease": [
          0.16,
          1,
          0.3,
          1
        ]
      }
    }
  }

• fadeInDown

  {
    "hidden": {
      "opacity": 0,
      "y": -24
    },
    "visible": {
      "opacity": 1,
      "y": 0,
      "transition": {
        "duration": 0.5,
        "ease": [
          0.16,
          1,
          0.3,
          1
        ]
      }
    }
  }

• fadeInLeft

  {
    "hidden": {
      "opacity": 0,
      "x": 24
    },
    "visible": {
      "opacity": 1,
      "x": 0,
      "transition": {
        "duration": 0.5,
        "ease": [
          0.16,
          1,
          0.3,
          1
        ]
      }
    }
  }

• fadeInRight

  {
    "hidden": {
      "opacity": 0,
      "x": -24
    },
    "visible": {
      "opacity": 1,
      "x": 0,
      "transition": {
        "duration": 0.5,
        "ease": [
          0.16,
          1,
          0.3,
          1
        ]
      }
    }
  }

• fadeInUp

  {
    "hidden": {
      "opacity": 0,
      "y": 24
    },
    "visible": {
      "opacity": 1,
      "y": 0,
      "transition": {
        "duration": 0.5,
        "ease": [
          0.16,
          1,
          0.3,
          1
        ]
      }
    }
  }

• screenSlide

  {
    "enter": {
      "y": "100%",
      "opacity": 0
    },
    "center": {
      "y": 0,
      "opacity": 1,
      "transition": {
        "duration": 0.6,
        "ease": [
          0.16,
          1,
          0.3,
          1
        ]
      }
    },
    "exit": {
      "y": "-30%",
      "opacity": 0,
      "transition": {
        "duration": 0.4,
        "ease": [
          0.65,
          0,
          0.35,
          1
        ]
      }
    }
  }

• staggerContainer

  {
    "hidden": {},
    "visible": {
      "transition": {
        "staggerChildren": 0.08
      }
    }
  }