Starter code for your Nextjs Boilerplate with Tailwind CSS

Page Transitions

Set to 1

Set to 3

Overlap page transitions

Page 1

{
  "name": "Slide Up",
  "variants": {
    "initial": {
      "opacity": 0,
      "top": "100vh",
      "scale": 0.4
    },
    "animate": {
      "opacity": 1,
      "top": "0vh",
      "scale": 1
    },
    "exit": {
      "opacity": 0,
      "top": "100vh",
      "scale": 0.4
    }
  },
  "transition": {
    "duration": 0.7
  }
}