micha-lmxt/svelte-motion

AnimatePresence onUpdate/exit is broken after HMR happens

FluffyDiscord opened this issue · 0 comments

Any time component hot reloads the onUpdate/exit breaks when playing the exit animation with AnimatePresence show={false} because the onUpdate is called only once, skipping to the end (it should transition for example the --var-clipping-progress from 1 to 0 but it fires only once with value of 0.13710664079394916)

My snippet

<AnimatePresence show={!loading}>
  <Motion
      let:motion
      initial={{
          "--var-clipping-progress": 1.0,
          scaleX: .1,
          scaleY: 1.4,
          y: "150%",
      }}
      animate={{
          "--var-clipping-progress": 0.0,
          scaleX: 1.0,
          scaleY: 1.0,
          y: "0%",
      }}
      exit={{
          "--var-clipping-progress": 1.0,
          scaleX: .1,
          scaleY: 1.4,
          y: "150%",
      }}
      transition={{
          "--var-clipping-progress": {
              duration: .35,
              ease: [0.33, 1, 0.68, 1],
          },
          scaleX: {
              //delay: .1,
              duration: .6,
              ease: [0.33, 1, 0.68, 1],
          },
          scaleY: {
              //delay: .3,
              duration: .45,
              ease: [0.25, 1, 0.5, 1],
          },
          y: {
              //delay: .15,
              duration: .6,
              ease: [0.83, 0, 0.17, 1],
          },
      }}
      onUpdate={handleClippingAnimation}
  >
      <div bind:this={pageContainerRef} use:motion class="flex flex-1 rounded-[45px] bg-neutral-900" style='clip-path: path("{clippingShape}")'>
      </div>
  </Motion>
</AnimatePresence>