How to cancel animations on route change/DOM clearing?

[TipToe888]

I'm using Svelte but I think that's irrelevant. The issue is when animations start and you navigate to a different route, the refs used for the subsequent animations are now undefined and cause an error in the console about trying to animate a non-existent DOM element.

I have tried wrapping my animate calls with if statements that check the refs exist before animating but even this doesn't work. I have tried directly setting animations to a variable and then calling the .cancel()/.stop() functions on the animations but this doesn't work either and there are times where the refs are dynamic and so I cannot even use this approach as I have to fully define the animate function ahead of time.

Does anyone have a better approach? I realize this isn't really a motionOne issue but a JS/promise issue. With setTimeouts I just clear them onDestroy of DOM but for some reason, my animate functions are incapable of being cleared/killed/stopped once the DOM is destroyed.