व्यू ट्रांज़िशन की मदद से, नेविगेशन को आसान बनाना

Yuriko Hirota
Yuriko Hirota
Saurabh Rajpal
Saurabh Rajpal

ट्रांज़िशन से उपयोगकर्ताओं को कई फ़ायदे मिलते हैं. जैसे, उन्हें कॉन्टेक्स्ट में बनाए रखना और इंतज़ार का समय कम करना. डेवलपर चाहते हैं कि वे पेजों के बीच आसानी से ट्रांज़िशन कर सकें. इससे उनकी साइट पर उपयोगकर्ताओं की दिलचस्पी बढ़ती है.

हालांकि, स्टेट ट्रांज़िशन की सुविधा चालू करना काफ़ी मुश्किल था, क्योंकि इसके लिए डेवलपर को दो अलग-अलग एलिमेंट के स्टेट मैनेज करने होते थे. यहां तक कि किसी आसान क्रॉस-फ़ेड में भी, दोनों स्टेटस एक साथ मौजूद होते हैं. इससे, इस्तेमाल करने से जुड़ी समस्याएं आती हैं. जैसे, आउटगोइंग एलिमेंट पर अतिरिक्त इंटरैक्शन को मैनेज करना. सहायक डिवाइसों के उपयोगकर्ताओं के लिए, एक ऐसी अवधि होती है जब DOM में पहले और बाद की स्थिति, दोनों एक ही समय पर मौजूद होती हैं. इसके अलावा, ट्री व्यू में चीज़ें इस तरह से मूव हो सकती हैं कि वे विज़ुअल तौर पर ठीक दिखें, लेकिन रीडिंग पोज़िशन और फ़ोकस आसानी से हट सकता है.

व्यू ट्रांज़िशन एपीआई, Chrome 111 में लॉन्च किया गया था. इसकी मदद से, पेजों के बीच आसानी से और बेहतर तरीके से ट्रांज़िशन बनाया जा सकता है. इसकी मदद से, स्टेटस के बीच ओवरलैप किए बिना अपने डीओएम में बदलाव किया जा सकता है. साथ ही, स्नैपशॉट किए गए व्यू का इस्तेमाल करके, स्टेटस के बीच ट्रांज़िशन ऐनिमेशन भी किया जा सकता है.

आपके मन में यह सवाल उठ सकता है कि इसे लागू करना कितना आसान है? इस्तेमाल के उदाहरण किस तरह के हैं? अन्य डेवलपर, व्यू ट्रांज़िशन का इस्तेमाल कैसे कर रहे हैं?

इस लेख में, चार अलग-अलग वेबसाइटों में व्यू ट्रांज़िशन लागू करने के बारे में बताया गया है: RedBus (यात्रा), CyberAgent (खबर/ब्लॉग पब्लिशर), Nykaa (ई-कॉमर्स), और PolicyBazaar (इंश्योरेंस). साथ ही, यह भी बताया गया है कि व्यू ट्रांज़िशन एपीआई का इस्तेमाल करके, इन वेबसाइटों को अलग-अलग तरीकों से कैसे फ़ायदा हुआ.

redBus

redBus, MakeMyTrip ग्रुप की एक बस बुकिंग और टिकट बेचने वाली वेबसाइट है. इसका मुख्यालय भारत के बेंगलुरु में है. यह दुनिया भर में अलग-अलग जगहों पर मौजूद है. यह उन पहली वेबसाइटों में से एक थी जिसने व्यू ट्रांज़िशन एपीआई का इस्तेमाल करके, बेहतर अनुभव देने की सुविधा लागू की थी.

Redbus ने व्यू ट्रांज़िशन की सुविधा क्यों लागू की?

redBus की टीम, एक जैसा और ऐप्लिकेशन जैसा वेब अनुभव देने में यकीन रखती है. यह अनुभव, उनके नेटिव ऐप्लिकेशन के जितना हो सके उतना ही बेहतर होना चाहिए. असल में, उन्होंने पिछले कुछ सालों में, अपनी ज़रूरत के हिसाब से कई समाधान लागू किए थे. उदाहरण के लिए, वे व्यू ट्रांज़िशन एपीआई के डेवलप होने से पहले ही, पेज ट्रांज़िशन के लिए कस्टमाइज़ किए गए JavaScript और सीएसएस के आधार पर ऐनिमेशन रोल आउट कर चुके थे. हालांकि, इसका मतलब है कि उन्हें नेटवर्क और डिवाइसों के निचले सेगमेंट में परफ़ॉर्मेंस मैनेजमेंट से जुड़ी समस्याओं का सामना करना पड़ा. कभी-कभी, अडैप्टिव लोडिंग की रणनीति के तहत, अलग-अलग अनुभव मिलता था.

redBus ने उपयोगकर्ताओं के सफ़र की अलग-अलग गतिविधियों के लिए, व्यू ट्रांज़िशन का इस्तेमाल किया. उदाहरण के लिए, उनके मोबाइल ऐप्लिकेशन के सेल्फ़-हेल्प सेक्शन में, जो कस्टम Chrome टैब में वेब पेज खोलता है. साथ ही, बस टिकट बुकिंग फ़नल में, जहां उपयोगकर्ता इन्वेंट्री लिस्टिंग पेज से पेमेंट पेज पर जाते हैं. बाद के मामले में, व्यू ट्रांज़िशन की मदद से पेज से पेज पर नेविगेट करना आसान हो गया. साथ ही, इससे उनके कन्वर्ज़न रेट में भी बढ़ोतरी हुई. ऐसा, बेहतर उपयोगकर्ता अनुभव और परफ़ॉर्मेंस की वजह से हुआ. ऐसा तब हुआ, जब सबसे अपडेट की गई इन्वेंट्री फ़ेच करने जैसे ज़्यादा काम किए जा रहे थे.

लागू करने से जुड़ी तकनीकी जानकारी

redBus, फ़्रंटएंड टेक्नोलॉजी स्टैक के तौर पर React और EJS का इस्तेमाल करता है. साथ ही, अलग-अलग प्रोसेस के लिए एसपीए और एमपीए का इस्तेमाल करता है. यहां दिए गए कोड के हिस्से से पता चलता है कि व्यू ट्रांज़िशन का इस्तेमाल कैसे किया जाता है:

/* Forward Transition */
export const goToURL = ( url: string , reactHistory: any ): void => {
  if(document.startViewTransition) {
    let viewTransition = document.startViewTransition();
    viewTransition.ready.finally(() => {
      reactHistory ? reactHistory.push(url) : (window.location.href = url);
    })
  } else {
    reactHistory ? reactHistory.push(url) : (window.location.href = url);
  }
};

/* Back Transition */
export const goBack = ( reactHistory: any ): void => {
  if(document.startViewTransition) {
    document.documentElement.classList.add('back-transition');
    let viewTransition = document.startViewTransition();
    viewTransition.ready.finally(() => {
      reactHistory ? reactHistory.goBack() : history.back();
    })
    viewTransition.finished.finally(() => {
      document.documentElement.classList.remove('back-transition');
    })
  } else {
    reactHistory ? reactHistory.goBack() : history.back();
  }
};

नीचे दी गई सीएसएस में, slide-to-right, slide-to-left, slide-from-right, और slide-from-left, सीएसएस ऐनिमेशन की मुख्य फ़्रेम हैं.

::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
  animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.back-transition::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
.back-transition::view-transition-new(root) {
  animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}

कारोबार पर असर

redBus ने अपनी साइट पर आईएनपी को बेहतर बनाने के साथ-साथ व्यू ट्रांज़िशन लागू करने का विकल्प चुना. इससे, 7% ज़्यादा बिक्री हुई. redBus के सीनियर इंजीनियरिंग मैनेजर अमित कुमार ने बताया कि व्यू ट्रांज़िशन की सुविधा उन लोगों के लिए बहुत अच्छी है जो उपयोगकर्ताओं को बेहतर अनुभव देना चाहते हैं और रखरखाव में कम खर्च करना चाहते हैं.

हमने उपयोगकर्ताओं के सुझाव, राय या शिकायत पाने के लिए कई सेशन आयोजित किए हैं. इनमें, अलग-अलग तरह के उपयोगकर्ताओं की अहम जानकारी शामिल की गई है. बस और रेल के उपयोगकर्ताओं और उनकी ज़रूरतों के बारे में हमारी गहरी समझ और विशेषज्ञता के आधार पर, हमें लगता है कि यह सुविधा शुरू से ही काफ़ी अहम साबित होगी. इसके लिए, A/B टेस्टिंग की ज़रूरत नहीं होगी. व्यू ट्रांज़िशन, ऐप्लिकेशन और वेब के बीच के अंतर को कम करने के लिए एक कदम है. इससे, नेविगेशन का बेहतर अनुभव मिलता है.

अनूप मेनन, सीटीओ redBus

CyberAgent

CyberAgent, जापान की एक आईटी कंपनी है. यह कई ऑनलाइन सेवाएं देती है. इनमें ब्लॉग और खबरें पब्लिश करने की सेवा भी शामिल है.

CyberAgent ने व्यू ट्रांज़िशन की सुविधा क्यों लागू की?

CyberAgent ने पहले भी उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, ऐनिमेशन वाले ट्रांज़िशन लागू करने के लिए, सीएसएस ऐनिमेशन या फ़्रेमवर्क का इस्तेमाल करने पर विचार किया था. हालांकि, उन्हें डीओएम को रेंडर करने और कोड को मैनेज करने में खराब परफ़ॉर्मेंस की समस्या थी. जब Chrome ने व्यू ट्रांज़िशन एपीआई के लिए सहायता जोड़ी, तो वे इन चुनौतियों को दूर करने वाले दिलचस्प पेज ट्रांज़िशन बनाने के लिए, इसका इस्तेमाल करने को लेकर उत्साहित थे.

CyberAgent ने ब्लॉग की सूची और ब्लॉग पेज के बीच व्यू ट्रांज़िशन लागू किए. यहां देखें कि उन्होंने हीरो इमेज में एलिमेंट ट्रांज़िशन कैसे जोड़ा. उनकी साइट पर जाएं और आज ही लाइव स्ट्रीम का आनंद लें.

उन्होंने अलग-अलग डिवाइसों के लिए अलग-अलग ऐनिमेशन डिज़ाइन करने के लिए, मीडिया क्वेरी का भी इस्तेमाल किया. उन्होंने मोबाइल पेजों के लिए, एलिमेंट ट्रांज़िशन शामिल किए, लेकिन डेस्कटॉप के लिए इस इफ़ेक्ट में बहुत ज़्यादा मूवमेंट था.

@media screen and (min-width: 769px) {
  .main-visual {
    view-transition-name: none !important;
  }
}

लागू करने से जुड़ी तकनीकी जानकारी

CyberAgent, एसपीए बनाने के लिए Next.js का इस्तेमाल करता है. नीचे दिए गए कोड के उदाहरण से पता चलता है कि वे View Transition API का इस्तेमाल कैसे करते हैं.

export const usePageTransition = () => {
  const router = useRouter();
  const defferedRef = useRef<Deferred | null>(null);

  useEffect(() => {
    const handleRouteChangeComplete = () => {
      defferedRef.current?.resolve();
    };

    const handleRouteChangeStart = (url: string) => {
      if (!("startViewTransition" in document)) return;
      if (router.asPath === url) return;

      const deffered = new Deferred();
      defferedRef.current = deffered;
      (document as Document).startViewTransition(async () => {
        await deffered.promise;
      });
    };

    router.events.on("routeChangeStart", handleRouteChangeStart);
    router.events.on("routeChangeComplete", handleRouteChangeComplete);

    return () => {
      router.events.off("routeChangeStart", handleRouteChangeStart);
      router.events.off("routeChangeComplete", handleRouteChangeComplete);
    };
  }, [router.asPath]);
};

Next.js कोड के कुछ और सैंपल देखें.

प्री-रेंडरिंग टेक्नोलॉजी की मदद से, एमपीए के लिए ट्रांज़िशन देखना

CyberAgent ने Ameba News नाम की अपनी सेवा पर, मल्टीपल पेज ऐप्लिकेशन (एमपीए) के लिए व्यू ट्रांज़िशन एपीआई (फ़िलहाल, फ़्लैग chrome://flags/#view-transition-on-navigation के तहत) को भी आज़माया. यह एक समाचार पोर्टल साइट है.

व्यू ट्रांज़िशन का इस्तेमाल दो जगहों पर किया गया था: पहला, खबरों की कैटगरी बदलते समय, जैसा कि नीचे दिए गए वीडियो में दिखाया गया है.

दूसरा, खबरों के हाइलाइट पेज के बीच में होता है. यहां कॉन्टेंट का एक हिस्सा दिखाया जाता है. जब उपयोगकर्ता ज़्यादा जानकारी देखें पर क्लिक करता है, तो लेख का बाकी हिस्सा फ़ेड इन हो जाता है.

दिलचस्प बात यह है कि उन्होंने सिर्फ़ उस हिस्से में ऐनिमेशन जोड़ा है जो बटन पर क्लिक करने के बाद बदल जाएगा. ऐनिमेशन डिज़ाइन में इस छोटे से बदलाव से, उपयोगकर्ता के नज़रिए से एमपीए पेज, एसपीए पेज की तरह दिखता है. इसमें सिर्फ़ नया कॉन्टेंट ऐनिमेट होता है:

उन्होंने ऐसा करने के लिए, पेज के अलग-अलग हिस्सों को अलग-अलग view-transition-name असाइन किया. उदाहरण के लिए, उन्होंने लेख के सबसे ऊपर वाले हिस्से के लिए एक view-transition-name और सबसे नीचे वाले हिस्से के लिए दूसरा view-transition-name असाइन किया. साथ ही, सबसे ऊपर वाले हिस्से में कोई ऐनिमेशन नहीं जोड़ा.

::view-transition-old(root) {
  animation:
    var(--animation-disappear-duration) var(--animation-disappear-easing) both fade-out;
  }

::view-transition-new(root) {
  animation:
    var(--animation-appear-in-duration) var(--animation-appear-in-easing) both fade-in;
}

एक डायग्राम, जिसमें दिखाया गया है कि पेज के ऊपरी हिस्से में ऐनिमेशन नहीं होता, जबकि निचले हिस्से में ट्रांज़िशन होता है.

CyberAgent ने व्यू ट्रांज़िशन API का इस्तेमाल करके एक और दिलचस्प काम किया है. उन्होंने ज़्यादा जानकारी वाले पेज पर, प्री-रेंडरिंग के नियमों को आसानी से लागू करने के लिए, क्विकलिंक का इस्तेमाल किया है. यहां उनका सैंपल कोड दिया गया है:

import { prerender } from https://.../quicklink.mjs’;

window.addEventListener('load', () => {
  const match = location.pathname.match(/\\/(.+)\\/hl\\/([0-9a-z-_]+)/);
  if (!match) return;
    const [_, dirname, entryId] = match;
    prerender(`/${dirname}/${entryId}/`);
  });

क्विकलिंक लागू करने के बारे में ज़्यादा जानने के लिए, यह लेख पढ़ें.

टेस्टिमोनियल

CyberAgent में Ameba सेवा के टेक्नोलॉजी लीड, काज़ुनारी हारा ने बताया कि व्यू ट्रांज़िशन से कारोबार पर दो वजहों से काफ़ी असर पड़ सकता है.

सबसे पहले, वे उपयोगकर्ताओं को पेज पर गाइड करते हैं. व्यू ट्रांज़िशन की मदद से, उपयोगकर्ताओं का ध्यान सबसे अहम मैसेज पर खींचा जा सकता है. साथ ही, वे वेब पेज का ज़्यादा से ज़्यादा फ़ायदा ले पाते हैं. साथ ही, ऐनिमेशन की मदद से ब्रैंड को बेहतर तरीके से दिखाया जा सकता है. CyberAgent के पास अपने ब्रैंड के बारे में बताने के लिए, ऐनिमेशन का एक डिज़ाइन है. व्यू ट्रांज़िशन की मदद से, वे बाहरी लाइब्रेरी को मैनेज करने की लागत जोड़े बिना, ब्रैंडेड अनुभव को लागू कर सकते हैं.

व्यू ट्रांज़िशन, मेरे पसंदीदा एपीआई में से एक है. ब्राउज़र की स्टैंडर्ड सुविधा के तौर पर ऐनिमेशन जोड़ने की सुविधा की मदद से, लाइब्रेरी पर निर्भर अन्य समाधानों की तुलना में व्यू ट्रांज़िशन को लागू करना और उन्हें मैनेज करना आसान हो जाता है. हम अपने ब्रैंड के बारे में बताने के लिए, ज़्यादा सेवाओं में व्यू ट्रांज़िशन लागू करने की कोशिश कर रहे हैं.

कज़ुनारी हारा, Ameba के सीटीओ

Nykaa

Nykaa, भारत का सबसे बड़ा फ़ैशन और ब्यूटी ई-कॉमर्स प्लैटफ़ॉर्म है. उनका मकसद, अपने मोबाइल वेब अनुभव को अपने नेटिव ऐप्लिकेशन के अनुभव के जितना हो सके उतना करीब बनाना है. पहले, ट्रांज़िशन ऐनिमेशन लागू करने की कोशिश करते समय, उन्हें कस्टम JavaScript कोड लिखने में मुश्किल आ रही थी. इससे उनकी वेबसाइट की परफ़ॉर्मेंस पर भी थोड़ा असर पड़ा.

Nykaa ने व्यू ट्रांज़िशन की सुविधा क्यों लागू की?

व्यू ट्रांज़िशन की सुविधा आने के बाद, Nykaa की टीम को एक मौका मिला. इस सुविधा के नेटिव तौर पर उपलब्ध होने का मतलब है कि पेज ट्रांज़िशन के यूज़र एक्सपीरियंस (यूएक्स) को परफ़ॉर्मेंस पर कोई असर डाले बिना काफ़ी बेहतर बनाया जा सकता है. Nykaa, प्रॉडक्ट की जानकारी वाले पेज से प्रॉडक्ट लिस्टिंग पेज पर जाने के लिए, व्यू ट्रांज़िशन का ज़्यादा से ज़्यादा इस्तेमाल कर रहा है.

लागू करने से जुड़ी तकनीकी जानकारी

Nykaa ने अपना एसपीए बनाने के लिए, React और Emotion का इस्तेमाल किया. React के साथ व्यू ट्रांज़िशन का इस्तेमाल करने के तरीके के बारे में ज़्यादा सैंपल कोड यहां देखे जा सकते हैं.

if (document.startViewTransition) {
      document.startViewTransition(() => {
        history.push(productUrl);
      });
    } else {
      history.push(productUrl);
   }

const fadeIn = keyframes`
  from { opacity: 0; }
`;

const fadeOut = keyframes`
  to { opacity: 0; }
`;

const slideFromRight = keyframes`
  from { transform: translateX(300px); }
`;

const slideToLeft = keyframes`
  to { transform: translateX(-300px); }
`;

const slideToRight = keyframes`
  to { transform: translateX(300px); }
`;

const slideFromLeft = keyframes`
  from { transform: translateX(-300px); }
`

साइड ड्रॉअर ऐनिमेशन के लिए सीएसएस:

::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both ${fadeOut},
  1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideToLeft};
}

::view-transition-new(root) {
  animation: 400ms cubic-bezier(0, 0, 0.2, 1) 300ms both ${fadeIn},
  1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideFromRight};
}

.back-transition {
  display: inherit;
}

.back-transition::view-transition-old(root) {
  animation-name: fade-out, ${slideToRight};
}

.back-transition::view-transition-new(root) {
  animation-name: fade-in, ${slideFromLeft};
}

टेस्टिमोनियल

Nykaa के ऐप्लिकेशन हेड सुनीत जिंदल ने बताया कि व्यू ट्रांज़िशन का सबसे बड़ा फ़ायदा "तेज़ी का एहसास" था. Nykaa ने बैकएंड से कॉन्टेंट लोड होने का इंतज़ार करने के लिए, शिमर इफ़ेक्ट का इस्तेमाल किया. हालांकि, उन्हें पता चला कि शिमर इफ़ेक्ट दिखाने से, उपयोगकर्ताओं को यह जानकारी नहीं मिलती कि कॉन्टेंट लोड होने में कितना समय लगेगा. व्यू ट्रांज़िशन की मदद से, ट्रांज़िशन से ही उपयोगकर्ताओं को यह अहसास हुआ कि "कुछ होने वाला है". इससे, इंतज़ार कम कष्टदायी हो गया.

व्यू ट्रांज़िशन की मदद से, अपने वेब पेज के यूज़र एक्सपीरियंस को बेहतर बनाने के बाद Nykaa काफ़ी खुश है. साथ ही, वह अन्य पेजों पर भी व्यू ट्रांज़िशन लागू करने के लिए तैयार है. डिज़ाइन के उनके उपाध्यक्ष ने इस बारे में यह कहा है:

हम आने वाले समय में, उन सभी सुविधाओं में व्यू ट्रांज़िशन लागू करने की कोशिश करेंगे जहां यह काम का हो. कुछ इलाकों की पहचान पहले ही कर ली गई है और टीम उन पर काम कर रही है.

कृष्णा आर. वी., डिज़ाइन के उपाध्यक्ष

PolicyBazaar

PolicyBazaar की मुख्य कंपनी गुड़गांव में है. यह भारत की सबसे बड़ी इंश्योरेंस एग्रीगेटर और बहुराष्ट्रीय फ़ाइनेंशियल टेक्नोलॉजी कंपनी है.

PolicyBazaar ने व्यू ट्रांज़िशन की सुविधा क्यों लागू की?

PolicyBazaar एक वेब-फ़र्स्ट कंपनी है. इसलिए, इसकी टीम का मकसद हमेशा अपने उपयोगकर्ताओं को बेहतरीन अनुभव देना रहा है. व्यू ट्रांज़िशन एपीआई के लॉन्च से पहले भी, JavaScript और CSS का इस्तेमाल करके कस्टम ट्रांज़िशन लागू करना आम बात थी. ऐसा इसलिए किया जाता था, क्योंकि इससे उपयोगकर्ता अनुभव बेहतर होता था, नेविगेशन फ़्लो आसान होता था, और वेबसाइटों की विज़ुअल अपील बेहतर होती थी.

हालांकि, कस्टम तरीके से लागू करने की वजह से, कभी-कभी परफ़ॉर्मेंस में देरी होती थी. साथ ही, कोड को मैनेज करने में मुश्किल होती थी और इस्तेमाल किए गए फ़्रेमवर्क के साथ काम करने में समस्याएं आती थीं. View Transitions API की मदद से, उन्हें इनमें से ज़्यादातर समस्याओं को हल करने में मदद मिली. इस एपीआई की मदद से, उन्हें आसानी से इस्तेमाल किया जा सकने वाला इंटरफ़ेस मिला. साथ ही, परफ़ॉर्मेंस से जुड़े फ़ायदे भी नेटिव तौर पर उपलब्ध थे.

PolicyBazaar ने प्री-कोट की प्रोसेस के दौरान, अलग-अलग एलिमेंट में व्यू ट्रांज़िशन का इस्तेमाल किया. इससे संभावित खरीदारों को, इंश्योरेंस पॉलिसी खरीदने के लिए ज़रूरी जानकारी देने में दिलचस्पी पैदा हुई.

लागू करने से जुड़ी तकनीकी जानकारी

वे हाइब्रिड फ़्रेमवर्क का इस्तेमाल करते हैं. उनके ज़्यादातर कोडबेस में Angular और React का इस्तेमाल किया जाता है. यहां Angular में लिखे गए उनके कोड का एक हिस्सा दिया गया है. इसे अमन सोनी (PolicyBazaar के लीड फ़्रंटएंड डेवलपर) ने शेयर किया है:

toggleWidgetAnimation() {
    let doc:any = document;

    if (!doc.startViewTransition) {
      this.toggleWidget();
      return;
    }

    doc.startViewTransition(() => this.toggleWidget());
  }

  toggleWidget() {
    let badgeEle = document.querySelector('.animate_init_state_one');
    let textEle = document.querySelector('.animate_init_state_two');

    badgeEle.classList.toggle('hide');
    textEle.classList.toggle('hide');
  }

टेस्टिमोनियल

Life BU के हेड ऑफ़ डिज़ाइन ऋषभ मेहरोत्रा ने बताया कि व्यू ट्रांज़िशन की मदद से, वेबसाइट को इस्तेमाल करने में आसानी हुई है. साथ ही, उपयोगकर्ताओं की दिलचस्पी बढ़ी है और वे वेबसाइट से पूरी तरह संतुष्ट हैं. इन सभी बातों से, वेबसाइट पर आने वाले लोगों के अनुभव को बेहतर बनाने में मदद मिली है. इससे, आसान नेविगेशन, निर्देशों के साथ इंटरैक्शन, कम कॉग्निटिव लोड, आधुनिक स्टाइल वगैरह देने में मदद मिली.

PB का मुख्य मकसद, वेब पर बेहतर अनुभव देना है. इसमें, VT एक अहम टूल साबित हुआ है. डेवलपर कम्यूनिटी और उपयोगकर्ताओं, दोनों के बीच इसकी लोकप्रियता ने हमारी टीम को उत्साहित किया है. हम इसे अलग-अलग पीओडी के साथ इंटिग्रेट करने पर विचार कर रहे हैं. हमें उम्मीद है कि इससे लोगों की संतुष्टि के लेवल और ऑपरेशनल एक्सिलेंस पर काफ़ी अच्छा असर पड़ेगा.

सौरभ तिवारी (सीटीओ, PolicyBazaar)

अगले चरण

क्या आपको व्यू ट्रांज़िशन आज़माने हैं? ज़्यादा जानने के लिए, यहां दिए गए कुछ संसाधनों का इस्तेमाल करें: