كيفية عمل animation في react

بالطبع يوجد عديد من المكتبات التي تدعمها الreact والتي يمكنها عمل animation 

أحد أشهر تلك المكتبات هي مكتبة framer والتي يمكنك زيارة موقعها عبر الضغط هنا

ومثال على تلك المكتبة : 

import { motion } from "framer-motion"

export const MyComponent = () => (
  <motion.div
    animate={{
      scale: [1, 2, 2, 1, 1],
      rotate: [0, 0, 270, 270, 0],
      borderRadius: ["20%", "20%", "50%", "50%", "20%"],
    }}
  />
)

على سبيل المثال تلك الشفرة البرمجية تقوم بجعل مربع يتضاعف حجمه ثم يدور بزاوية 270 درجة ويتحول إلى دائرة ثم ينقص حجمه مرة أخرى ثم يدور إلى الخلف 270 درجة ثم يرجع إلى مربع مرة أخرى, ويمكنك تجربة ذلك المثال من خلال ذلك الرابط