AnimatePresence onUpdate/exit is broken after HMR happens
FluffyDiscord opened this issue · 0 comments
FluffyDiscord commented
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>