Docs
Scaling
Scaling
Displays a Scaling component.
Scaling Up and Down
Installation
Install the following dependencies:
npm install framer-motionCopy and paste the Scaling code into your project.
API Reference
Props
| Prop | Type | Description |
|---|---|---|
text | string | The text to be displayed inside the component with scaling effect. |
className | string | Optional custom class for the text, defaults to text-4xl font-bold text-center. |
scaleStart | number | Initial scale value for the animation, defaults to 0.5. |
scaleEnd | number | Final scale value for the animation, defaults to 1.5. |
duration | number | Duration of the scale animation, defaults to 1.5 seconds. |
Usage
export default function Demo() {
return (
<ScaleEffect
text="Scaling Up and Down"
className="text-5xl font-bold text-center text-green-500"
scaleStart={0.6}
scaleEnd={1.4}
duration={2}
/>
)
};