@vtbag/utensil-drawer/lib/pause.js

Pull out just what you need to craft seamless transitions. The Utensil Drawer holds reusable functions to help you build websites with view transitions. It is a bit sparse right now, but like the one in your kitchen, it is bound to fill up over time.

export function pauseAllAnimations(scope) {
    (scope !== document ? scope.getAnimations({ subtree: true }) : scope.getAnimations()).forEach((animation) => {
        const effect = animation.effect;
        const pseudo = effect?.pseudoElement;
        if (effect instanceof KeyframeEffect && pseudo?.startsWith('::view-transition-group')) {
            animation.pause();
        }
    });
}
export function unPauseAllAnimations(scope) {
    (scope !== document ? scope.getAnimations({ subtree: true }) : scope.getAnimations()).forEach((animation) => {
        const effect = animation.effect;
        const pseudo = effect?.pseudoElement;
        if (effect instanceof KeyframeEffect && pseudo?.startsWith('::view-transition-group')) {
            animation.play();
        }
    });
}