React या Next.js ऐप में एनिमेशन कैसे जोड़ें

क्या Framer Motion को अब Motion कहा जाता है?

हाँ। जो library पहले framer-motion नाम से publish होती थी, वह अब Motion है, एक स्वतंत्र project। इसकी upgrade गाइड छोटी है: पुराना पैकेज uninstall करें, motion इंस्टॉल करें, और import path बदलें।

npm uninstall framer-motion
npm install motion

// before
import { motion } from "framer-motion";
// after
import { motion } from "motion/react";

component API वही है, इसलिए import बदलने के बाद मौजूदा motion.div कोड चलता रहता है। नाम बदलने से पहले लिखे गए tutorials अब भी काम के हैं; बस framer-motion को motion/react समझकर पढ़ें।

React में इंटरफ़ेस एनिमेशन के लिए Motion एक अच्छा डिफ़ॉल्ट है: elements का आना-जाना, layout बदलाव, gestures और shared-element transitions। लेकिन बनाए गए इलस्ट्रेशन या मैस्कॉट के लिए यह सही टूल नहीं है, क्योंकि वे डिज़ाइन टूल से फ़ाइल के रूप में आते हैं। उनके लिए Lottie या Rive इस्तेमाल करें, जिनके बारे में नीचे बताया गया है।

Motion से component को एनिमेट कैसे करें?

किसी element को उसके motion वाले रूप से बदलें और शुरुआती व आखिरी स्टेट बताएँ। शर्त पर दिखने वाले elements को AnimatePresence में रखें, ताकि unmount होने से पहले वे exit एनिमेशन चला सकें।

import { AnimatePresence, MotionConfig, motion } from "motion/react";

export function Toast({ open, message }: { open: boolean; message: string }) {
  return (
    <MotionConfig reducedMotion="user">
      <AnimatePresence>
        {open && (
          <motion.div
            key="toast"
            role="status"
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 12 }}
            transition={{ duration: 0.2 }}
          >
            {message}
          </motion.div>
        )}
      </AnimatePresence>
    </MotionConfig>
  );
}

AnimatePresence के हर child को एक स्थिर key चाहिए। reducedMotion="user" के साथ, जब विज़िटर ने मोशन कम करें चालू किया हो, तो Motion transform और layout एनिमेशन बंद कर देता है, जबकि opacity और color बदलाव चलते रहते हैं। आमतौर पर आपको यही व्यवहार चाहिए। ज़्यादा बारीक कंट्रोल के लिए useReducedMotion() hook एक boolean लौटाता है, जिसके आधार पर आप अलग logic चला सकते हैं। MotionConfig को हर component में नहीं, बल्कि अपने ऐप के root के पास एक बार रखें।

React में plain CSS कब काफ़ी है?

अक्सर। hover effects, focus rings, spinners और आसान fades के लिए किसी library की ज़रूरत नहीं। transition वाली CSS module या Tailwind class में कोई JavaScript खर्च नहीं होता, और यह React के hydrate होने से पहले भी चलती है।

/* Button.module.css */
.button { transition: transform 150ms ease-out; }
.button:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}

जब CSS मुश्किल लगने लगे, तब Motion अपनाएँ:

• किसी element को React के हटाने से पहले exit एनिमेशन चलाना हो;
• layout बदलाव (list का क्रम बदलना, card का फैलना) स्मूथ तरीके से एनिमेट होना चाहिए;
• values state, gestures या scroll position से आती हों;
• कई एनिमेशन एक के बाद एक चलने हों।

समझदारी भरा बँटवारा यह है: micro-interactions के लिए CSS, component choreography के लिए Motion, और इलस्ट्रेटर के बनाए किसी भी काम के लिए एनिमेशन फ़ाइल। तीनों को अलग रखने से आपका bundle भी छोटा रहता है: जो पेज सिर्फ़ CSS इस्तेमाल करते हैं, वे Motion लोड ही नहीं करते।

React में Lottie फ़ाइल कैसे जोड़ें?

LottieFiles का React player इंस्टॉल करें और उसे .lottie या .json फ़ाइल के path के साथ render करें:

npm install @lottiefiles/dotlottie-react

import { DotLottieReact } from "@lottiefiles/dotlottie-react";

export function EmptyState() {
  return (
    <DotLottieReact
      src="/animations/empty-inbox.lottie"
      loop
      autoplay
      style={{ width: 240, height: 240 }}
    />
  );
}

DotLottieReact एक canvas render करता है और style व className जैसे canvas props लेता है। custom playback controls के लिए, इसका dotLottieRefCallback prop आपको अंदर का player instance देता है, जिसमें play, pause और seek methods हैं। यह component उसी dotlottie-web project से आता है जिससे plain web player, इसलिए फ़ाइलें React और static पेजों पर एक जैसा व्यवहार करती हैं।

Lottie उन इलस्ट्रेशन के लिए अच्छा है जो शुरू से आखिर तक सीधे चलते हैं: एम्प्टी स्टेट, ऑनबोर्डिंग सीन, confetti। अगर एनिमेशन को ऐप की स्टेट पर रिएक्ट करना है, जैसे loading से success पर जाना, तो इसके बजाय स्टेट मशीन पर बनी फ़ाइल पर विचार करें।

स्टेट वाला एनिमेटेड कैरेक्टर कैसे जोड़ें?

Rive का React रनटाइम इस्तेमाल करें। useRive फ़ाइल लोड करता है और render करने के लिए RiveComponent लौटाता है; autoBind: true के साथ, view model hooks आपको फ़ाइल की properties के setters देते हैं। Rive ज़्यादातर projects के लिए @rive-app/react-webgl2 की सलाह देता है, और @rive-app/react-canvas का API भी वही है।

import { useEffect } from "react";
import {
  useRive,
  useViewModelInstanceNumber,
  useViewModelInstanceTrigger,
} from "@rive-app/react-canvas";

type Status = "idle" | "loading" | "done";

export function Mascot({ status }: { status: Status }) {
  const { rive, RiveComponent } = useRive({
    src: "/mascot.riv",
    stateMachine: "CharacterViewModelMachine",
    autoplay: true,
    autoBind: true,
  });
  const vmi = rive?.viewModelInstance;
  const { setValue: setMood } = useViewModelInstanceNumber("mood", vmi);
  const { trigger: success } = useViewModelInstanceTrigger("success", vmi);

  useEffect(() => {
    if (status === "loading") setMood?.(5);
    if (status === "done") { success?.(); setMood?.(0); }
  }, [status, setMood, success]);

  return (
    <div style={{ width: 200, height: 200 }}>
      <RiveComponent aria-label="Assistant mascot" />
    </div>
  );
}

कैरेक्टर को props से चलाएँ, render के दौरान कभी नहीं, और canvas के बजाय wrapper का साइज़ तय करें। Charmotion अपलोड किए गए कैरेक्टर, मैस्कॉट या लोगो से इसी तरह की फ़ाइल बनाता है, साथ में तैयार React कोड भी देता है; React में Rive गाइड में input-based API और हर पैकेज विकल्प के बारे में विस्तार से बताया गया है।

Next.js में SSR और hydration की समस्याओं से कैसे बचें?

App Router में components डिफ़ॉल्ट रूप से server components होते हैं, और server components में hooks, browser APIs या event handlers इस्तेमाल नहीं हो सकते। जो भी फ़ाइल useRive कॉल करती है, DotLottieReact render करती है या state के साथ Motion इस्तेमाल करती है, उसकी शुरुआत "use client" directive से होनी चाहिए:

"use client";

import { Mascot } from "./Mascot";
export default Mascot;

client boundary छोटी रखें। एनिमेटेड widget को client component बनाएँ और उसे बाकी server-rendered पेज में import करें, ताकि सिर्फ़ वही widget JavaScript भेजे।

अगर कोई library import के समय window को छूती है और prerendering में फिर भी fail होती है, तो उसे next/dynamic से सिर्फ़ ब्राउज़र में लोड करें:

"use client";
import dynamic from "next/dynamic";

const Mascot = dynamic(() => import("./Mascot").then((m) => m.Mascot), {
  ssr: false,
  loading: () => <div style={{ width: 200, height: 200 }} />,
});

रनटाइम लोड होते समय placeholder लेआउट शिफ़्ट नहीं होने देता। Pages Router में भी यही dynamic(..., { ssr: false }) pattern लागू होता है, बस directive के बिना।

Next.js पेज में एनिमेटेड कैरेक्टर कैसे जोड़ें

1. रनटाइम इंस्टॉल करें. npm install @rive-app/react-canvas (या @rive-app/react-webgl2) चलाएँ और .riv फ़ाइल को public/ में रखें।
2. client component बनाएँ. फ़ाइल की शुरुआत "use client" से करें और useRive को फ़ाइल, स्टेट मशीन के नाम, autoplay और autoBind: true के साथ कॉल करें।
3. setters पाएँ. मूड के लिए useViewModelInstanceNumber और वन-शॉट रिएक्शन के लिए useViewModelInstanceTrigger इस्तेमाल करें।
4. ऐप की स्टेट को कैरेक्टर से जोड़ें. एक useEffect में, जब भी आपका status prop बदले, मूड सेट करें या ट्रिगर फ़ायर करें।
5. render करें और साइज़ तय करें. RiveComponent को तय width और height वाले wrapper के अंदर render करें, और component को अपने server पेज में import करें।

अक्सर पूछे जाने वाले सवाल

क्या मुझे अब भी framer-motion इंस्टॉल करना चाहिए?

नहीं। नए projects में motion इंस्टॉल करें और "motion/react" से import करें। मौजूदा projects framer-motion को uninstall करके, motion इंस्टॉल करके और import paths अपडेट करके बदल सकते हैं; Motion की upgrade गाइड बताती है कि component API नहीं बदला है, इसलिए import अपडेट के बाद मौजूदा motion.div कोड चलता रहता है।

Next.js में "window is not defined" एरर क्यों आता है?

कोई browser-only library server पर चल गई। उसे इस्तेमाल करने वाले component में "use client" जोड़ें, और अगर एरर फिर भी आए, तो उस component को next/dynamic और ssr: false के साथ import करें, ताकि वह सिर्फ़ ब्राउज़र में लोड हो। dynamic import को साइज़ वाला placeholder दें, ताकि लेआउट शिफ़्ट न हो।

React ऐप के लिए Lottie या Rive?

शुरू से आखिर तक सीधे चलने वाले इलस्ट्रेशन के लिए Lottie इस्तेमाल करें, जैसे एम्प्टी स्टेट या ऑनबोर्डिंग सीन। जब कैरेक्टर को ऐप के events के जवाब में स्टेट बदलनी हो, तब Rive इस्तेमाल करें, क्योंकि एक स्टेट मशीन फ़ाइल कई अलग एनिमेशन और उन्हें बदलने के logic की जगह ले लेती है। कई ऐप दोनों इस्तेमाल करते हैं: सीन के लिए Lottie, मैस्कॉट के लिए Rive।

React में "मोशन कम करें" सेटिंग का ध्यान कैसे रखें?

Motion एनिमेशन के लिए अपने ऐप को <MotionConfig reducedMotion="user"> में रैप करें, CSS में prefers-reduced-motion media queries जोड़ें, और Lottie व Rive players को रोकने या एक स्थिर फ़्रेम दिखाने के लिए useReducedMotion() या matchMedia का इस्तेमाल करें। इसे टेस्ट करने के लिए अपने ऑपरेटिंग सिस्टम में मोशन कम करें सेटिंग चालू करें।

इस गाइड से झटपट जवाब

• क्या Framer Motion को अब Motion कहा जाता है?

स्रोत

• Upgrade guide: framer-motion to motion, Motion
• React accessibility: reduced motion, Motion
• dotlottie-web: players for web, React, Vue, Svelte and web components, LottieFiles on GitHub
• React runtime, Rive
• Canvas vs WebGL, Rive
• use client directive, Next.js
• prefers-reduced-motion, MDN Web Docs