animate-elements.mjs 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. import { resolveElements, getValueTransition, NativeAnimation } from 'motion-dom';
  2. import { invariant, secondsToMilliseconds } from 'motion-utils';
  3. function animateElements(elementOrSelector, keyframes, options, scope) {
  4. const elements = resolveElements(elementOrSelector, scope);
  5. const numElements = elements.length;
  6. invariant(Boolean(numElements), "No valid element provided.");
  7. const animations = [];
  8. for (let i = 0; i < numElements; i++) {
  9. const element = elements[i];
  10. const elementTransition = { ...options };
  11. /**
  12. * Resolve stagger function if provided.
  13. */
  14. if (typeof elementTransition.delay === "function") {
  15. elementTransition.delay = elementTransition.delay(i, numElements);
  16. }
  17. for (const valueName in keyframes) {
  18. const valueKeyframes = keyframes[valueName];
  19. const valueOptions = {
  20. ...getValueTransition(elementTransition, valueName),
  21. };
  22. valueOptions.duration && (valueOptions.duration = secondsToMilliseconds(valueOptions.duration));
  23. valueOptions.delay && (valueOptions.delay = secondsToMilliseconds(valueOptions.delay));
  24. animations.push(new NativeAnimation({
  25. element,
  26. name: valueName,
  27. keyframes: valueKeyframes,
  28. transition: valueOptions,
  29. allowFlatten: !elementTransition.type && !elementTransition.ease,
  30. }));
  31. }
  32. }
  33. return animations;
  34. }
  35. export { animateElements };