Framer X - Reuse animations - create by Jay Stakelon

reuse-animation.js

import { Data, animate, Override, Animatable } from "framer";

// Set an array to keep each scaleValues
const data = Data({ scaleValues: [] });

export const Scale: Override = props => {
  // Add to the array the id and the animation value
  data.scaleValues.push({ id: props.id, scaleValue: Animatable(1) });
  return {
    // Pass the current id to the function
    scale: getValueForId(props.id),
    onTap() {
      // Select the element using the matched id
      let valueToScale = getValueForId(props.id);
      valueToScale.set(0.6);
      animate.spring(valueToScale, 1);
    }
  };
};

const getValueForId = id => {
  // Look into all the ids in the array and check if it matches with the current id
  let obj = data.scaleValues.find(function(el) {
    return el.id.toString() === id;
  });
  return obj.scaleValue;
};