Framer Motion से Animations
In this page:
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.5 }}
>
Content
</motion.div>
<AnimatePresence>{show && <motion.div exit={{ opacity: 0 }} />}</AnimatePresence>motion Components से Animate करना
Framer Motion हर HTML tag का एक motion.* version provide करता है (motion.div, motion.button, आदि) जो special animation props accept करता है। animate को एक target style object set करना element को smoothly इसकी current state से वहां transition कर देता है।
उदाहरण: Animating with motion Components
// Run in your local React project (npm install required)
import { motion } from 'framer-motion';
function App() {
return (
<motion.div animate={{ x: 100 }} transition={{ duration: 1 }}>
I slide to the right
</motion.div>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Initial और Animate States Define करना
initial prop एक element की starting appearance describe करता है (जैसे invisible और ऊपर shifted), और animate describe करता है यह कहां end up होना चाहिए। Framer Motion component mount होने पर automatically दोनों के बीच smoothly interpolate करता है।
उदाहरण: Defining Initial and Animate States
// Run in your local React project (npm install required)
import { motion } from 'framer-motion';
function FadeInBox() {
return (
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}>
I fade in on mount
</motion.div>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
AnimatePresence से Removal Animate करना
Normally, जब एक component React tree से remove होता है, यह instantly disappear हो जाता है बिना animate out होने का कोई chance दिए। Conditionally-rendered motion components को <AnimatePresence> में wrap करना आपको एक exit animation define करने देता है जो element को DOM से actually remove होने से पहले play होता है।
उदाहरण: Animating Removal with AnimatePresence
// Run in your local React project (npm install required)
import { motion, AnimatePresence } from 'framer-motion';
function App() {
const [show, setShow] = React.useState(true);
return (
<div>
<button onClick={() => setShow(!show)}>Toggle</button>
<AnimatePresence>
{show && <motion.div key="box" exit={{ opacity: 0 }}>Fades out on remove</motion.div>}
</AnimatePresence>
</div>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- <motion.div> के बजाय plain <div> उपयोग करना और animate जैसे animation props के काम करने की उम्मीद करना।
- एक initial state न देना, जिससे first render अपना entrance animation skip कर देता है।
- यह भूल जाना कि AnimatePresence specifically elements को DOM से REMOVE होते समय animate करने के लिए चाहिए, सिर्फ add होने के लिए नहीं।
- Framer Motion एक popular animation library है जो हर HTML element का motion.* version provide करती है।
- initial, animate, और exit props एक element की starting, target, और exit states describe करते हैं।
- AnimatePresence React tree से remove हो रहे elements के लिए exit animations enable करता है।
- Animations declarative हैं — आप states describe करते हैं, frame-by-frame motion नहीं।
npm install framer-motion चाहिए — इस sandbox में CDN के ज़रिए available नहीं; React 16.8+ के साथ काम करता है।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: