Framer Motion Transform Template

transformTemplate.motion.ts

import type { TransformProperties } from 'framer-motion/types/motion/types';

// These functions would not be necessary if `framer-motion`
// resets `transform` back to `none` when a `translate` value === `0`.

function hasScale(scale: TransformProperties['scale']) {
  return scale !== 1 && scale !== undefined;
}

function hasTranslateX(translateX: TransformProperties['scale']) {
  const isNumberZero = typeof translateX === 'number' && translateX === 0;
  const isStringZero = typeof translateX === 'string' && translateX.startsWith('0');

  return !isNumberZero && !isStringZero && translateX !== undefined;
}

export function iconTransformTemplate({ scale, translateX }: TransformProperties) {
  const scaleValue = hasScale(scale) ? `scale(${scale})` : null;
  const xValue = hasTranslateX(translateX) ? `translateX(${translateX})` : null;

  return scaleValue || xValue ? [scaleValue, xValue].join(' ') : 'none';
}