@ryanmorr/remotion

remotion

Animate elements before removing them from the DOM

Install

Download the CJS, ESM, UMD versions or install via NPM:

npm install @ryanmorr/remotion

Usage

Import the library:

import remotion from '@ryanmorr/remotion';

Provide an element, nodelist, or selector string as the first argument and a CSS class name as the second argument that triggers a CSS transition or keyframe animation. It returns a promise that is resolved when the transition/animation is complete and the element has been removed from the DOM:

remotion(element, 'fade-out').then(() => console.log('element removed'));

Supports a function as the second argument that is provided the element reference and returns the class name:

remotion('.item', (element) => 'fade-out');

If the function returns a promise, it can now be used to fully customize the removal process. You can perform a custom animation, execute side effects, and/or explicitly remove the element from the DOM yourself, then simply resolve the promise when your done:

remotion(nodelist, (element) => {
    return new Promise((resolve) => {
        fadeOut(element).then(() => {
            executeSideEffect(element);
            element.remove();
            resolve();
        });
    });
});

License

This project is dedicated to the public domain as described by the Unlicense.