taking js mixins too far

animate-equal.js

export const animateEqual = (properties, ...values) => {
  const percentIncrease = 100 / (values.length - 1);
  let result = {};
  let percent = 0;

  _.each(values, value => {
    let styles = {};
    _.each(value, (n, i) => {
      const prop = properties[i];
      styles = _.extend(styles, _.isFunction(prop) ? prop.apply(this, [n]) : {[prop]: n})
    })
    result = _.extend(result, {[`${percent}%`]: styles});
    percent += percentIncrease;
  })
  return result;
}

animation-mixins.js

export const zeroOrPx = x => x === 0 ? 0 : `${x}px`;
export const translate3DStr = (x = 0, y = 0, z = 0) => `translate3d(${zeroOrPx(x)}, ${zeroOrPx(y)}, ${zeroOrPx(z)})`;

export const scaleStr = (x = 0) => `scale(${x})`;

export const translate3d = (x = 0, y = 0, z = 0) => ({
  transform: translate3DStr(x, y, z)
});

export const scale = (x = 0) => ({
  transform: scaleStr(x)
});

export const translateAndScaleZ = (x = 0, y = 0, z = 0, s = 0) => ({
  transform: `${translate3DStr(x, y, z)} ${scaleStr(s)}`
});

export const translateAndScale = (x = 0, y = 0, s = 0) => ({
  transform: `${translate3DStr(x, y, 0)} ${scaleStr(s)}`
});

keyframes.js

import {scale, animateEqual} from 'utils/project';

//instead of this
const keyframes = {
  '0%': {
    transform: 'scale(1)',
    opacity: '1'
  },
  '25%': {
    transform: 'scale(1.15)',
    opacity: '0.8'
  },
  '50%': {
    transform: 'scale(1.1)',
    opacity: '0.7'
  },
  '75%': {
    transform: 'scale(1.35)',
    opacity: '0.9'
  },
  '100%': {
    transform: 'scale(1)',
    opacity: '1',
  }
}

//you can write this
const keyframes2 = {
  ...animateEqual(
    [scale, 'opacity'],
    [1, 1],
    [1.15, 0.8],
    [1.1, 0.7],
    [1.35, 0.9],
    [1, 1]
  ),
}