is-animatable.mjs 1017 B

123456789101112131415161718192021222324252627282930
  1. import { complex } from '../../value/types/complex/index.mjs';
  2. /**
  3. * Check if a value is animatable. Examples:
  4. *
  5. * ✅: 100, "100px", "#fff"
  6. * ❌: "block", "url(2.jpg)"
  7. * @param value
  8. *
  9. * @internal
  10. */
  11. const isAnimatable = (value, name) => {
  12. // If the list of keys tat might be non-animatable grows, replace with Set
  13. if (name === "zIndex")
  14. return false;
  15. // If it's a number or a keyframes array, we can animate it. We might at some point
  16. // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,
  17. // but for now lets leave it like this for performance reasons
  18. if (typeof value === "number" || Array.isArray(value))
  19. return true;
  20. if (typeof value === "string" && // It's animatable if we have a string
  21. (complex.test(value) || value === "0") && // And it contains numbers and/or colors
  22. !value.startsWith("url(") // Unless it starts with "url("
  23. ) {
  24. return true;
  25. }
  26. return false;
  27. };
  28. export { isAnimatable };