لماذا Framer Motion؟

Framer Motion مكتبة حركات قوية وسهلة لـ React. تعريفية وتدعم gestures والتخطيط.

حركة أساسية

import { motion } from 'framer-motion';

function Box() {
  return (
    
      مربع متحرك
    
  );
}

Hover و Tap

  زر متفاعل

Variants

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
};

const itemVariants = {
  hidden: { y: 20, opacity: 0 },
  visible: { y: 0, opacity: 1 }
};


  {items.map(item => (
    
      {item.text}
    
  ))}

AnimatePresence

import { AnimatePresence } from 'framer-motion';


  {isVisible && (
    
      يظهر ويختفي بسلاسة
    
  )}

الخلاصة

Framer Motion يجعل الحركات سهلة وجميلة. ابدأ ببسيط وتعلم Variants للتحكم الأفضل.