I use the useInvertedScale hook imported from framer-motion@1.6.0 and it throws an error useInvertedScale is not imported with the latest version of framer-motion .
This is how I use it :
import React from "react";
import { motion, useInvertedScale } from "framer-motion";
export const Title = ({ title, category, isSelected }) => {
const inverted = useInvertedScale();
const x = isSelected ? 30 : 15;
const y = x;
const scaleTranslate = ({ x, y, scaleX, scaleY }) =>
`scaleX(${scaleX}) scaleY(${scaleY}) translate(${x}, ${y}) translateZ(0)`;
return (
<motion.div
initial={false}
animate={{ x, y }}
transition={
isSelected
? { type: "spring", stiffness: 200, damping: 30 }
: { type: "spring", stiffness: 300, damping: 35 }
}
transformTemplate={scaleTranslate}
style={{
...inverted,
originX: 0,
originY: 0,
position: "absolute",
top: 0,
left: 0,
maxWidth: "300px",
}}
>
<span
style={{
color: "#fff",
fontSize: "14px",
textAlign: "right",
direction: "rtl",
}}
>
{category}
</span>
<h2 style={{ textAlign: "right", direction: "rtl" }}>{title}</h2>
</motion.div>
);
};
What is the replacement for this hook with the new version or it just has been deleted ?
useInvertedScale
is renamed to useDeprecatedInvertedScale
in newer versions.