stopAnimations

stopAnimations(element) calls .cancel() on every animation reported by element.getAnimations() — CSS animations, CSS transitions, and Web Animations API instances — and returns the array that was canceled. Useful before swapping classes so a previous transition doesn't fight the new one. Part of pota/use/animate.

Arguments

Argument	Type	Description
element	Element	The element whose animations to cancel

Returns: the array of canceled Animation instances (the snapshot from element.getAnimations()). Each has a .finished promise — await Promise.all(list.map(a => a.finished.catch(() => 0))) to wait for the cancellations to settle.

Examples

Cancel before re-triggering

Cancels whatever is in flight (CSS or Web Animations API alike), then removes and re-adds the class with a forced reflow in between, so the keyframes restart from the top.

import { ref, render } from 'pota'
import { stopAnimations } from 'pota/use/animate'

function App() {
	const box = ref()

	const restart = () => {
		stopAnimations(box())
		box().classList.remove('pulse')
		// force reflow so the re-add re-triggers the animation
		void box().getBoundingClientRect()
		box().classList.add('pulse')
	}

	return (
		<>
			<style>{`
				.box {
					width: 120px;
					padding: 1rem;
					color: white;
					background: #2a9d8f;
				}
				.pulse { animation: pulse 1s ease; }
				@keyframes pulse { 50% { transform: scale(1.3); } }
			`}</style>

			<button on:click={restart}>restart</button>
			<div
				use:ref={box}
				class="box pulse"
			>
				box
			</div>
		</>
	)
}

render(App)