default-transitions.mjs 985 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. import { transformProps } from '../../render/html/utils/keys-transform.mjs';
  2. const underDampedSpring = {
  3. type: "spring",
  4. stiffness: 500,
  5. damping: 25,
  6. restSpeed: 10,
  7. };
  8. const criticallyDampedSpring = (target) => ({
  9. type: "spring",
  10. stiffness: 550,
  11. damping: target === 0 ? 2 * Math.sqrt(550) : 30,
  12. restSpeed: 10,
  13. });
  14. const keyframesTransition = {
  15. type: "keyframes",
  16. duration: 0.8,
  17. };
  18. /**
  19. * Default easing curve is a slightly shallower version of
  20. * the default browser easing curve.
  21. */
  22. const ease = {
  23. type: "keyframes",
  24. ease: [0.25, 0.1, 0.35, 1],
  25. duration: 0.3,
  26. };
  27. const getDefaultTransition = (valueKey, { keyframes }) => {
  28. if (keyframes.length > 2) {
  29. return keyframesTransition;
  30. }
  31. else if (transformProps.has(valueKey)) {
  32. return valueKey.startsWith("scale")
  33. ? criticallyDampedSpring(keyframes[1])
  34. : underDampedSpring;
  35. }
  36. return ease;
  37. };
  38. export { getDefaultTransition };