Animate elements before removing them from the DOM
Download the CJS, ESM, UMD versions or install via NPM:
npm install @ryanmorr/remotion
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();
});
});
});
This project is dedicated to the public domain as described by the Unlicense.