Docs
Scaling

Scaling

Displays a Scaling component.

Loading...

Installation

Install the following dependencies:

npm install framer-motion

Copy and paste the Scaling code into your project.

API Reference

Props

PropTypeDescription
textstringThe text to be displayed inside the component with scaling effect.
classNamestringOptional custom class for the text, defaults to text-4xl font-bold text-center.
scaleStartnumberInitial scale value for the animation, defaults to 0.5.
scaleEndnumberFinal scale value for the animation, defaults to 1.5.
durationnumberDuration 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}
    />
  )
};