add TransitionDuration #70

app/teachers/page.tsx

@@ -1,8 +1,9 @@
 import {Metadata} from 'next';
 import clsx from 'clsx';
-import TextReveal from '@/components/shared/TextReveal/TextReveal';
 import {default as TeachersComponent} from '@/components/pages/Teachers/Teachers';
 import CATLink from '@/components/shared/CATLink/CATLink';
+import AppearInViewport from '@/components/shared/AppearInViewport/AppearInViewport';
+import TransitionDuration from '@/lib/framerMotion/TransitionDuration';
 
 const pageDescription = 'Meet your inspirational guides in the world of social dance';
 
@@ -26,20 +27,36 @@ const titleCn = clsx('text-8xl', 'mt-24', 'ml-4');
 const subTitleCn = clsx('text-4xl', 'my-4', 'w-2/3', 'ml-4');
 const CATLinkCn = clsx('mt-16');
 
+const titleVariants = {
+  hidden: {
+    opacity: 0,
+    x: -100,
+  },
+  visible: {
+    opacity: 1,
+    x: 0,
+  },
+};
+
 /**
  * @returns React component.
  */
 export default function Teachers() {
   return (
     <div className={containerCn}>
-      <TextReveal
-        text="Our team"
+      <AppearInViewport
         className={titleCn}
-      />
-      <TextReveal
-        text={pageDescription}
+        variants={titleVariants}
+        transition={{duration: TransitionDuration.VERY_LONG, type: 'spring', bounce: 0.5}}
+      >
+        OUR TEAM
+      </AppearInViewport>
+      <AppearInViewport
         className={subTitleCn}
-      />
+        transition={{delay: 1, duration: TransitionDuration.LONG}}
+      >
+        {pageDescription}
+      </AppearInViewport>
       <TeachersComponent />
       <CATLink
         text="BOOK A LESSON"

components/pages/MainPageVideoPlayer/VideoBackground.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import {m} from 'framer-motion';
 import {usePageVisibility} from 'react-page-visibility';
 import {useEffect} from 'react';
+import TransitionDuration from '@/lib/framerMotion/TransitionDuration';
 import useVideoBeforeEnd from './useVideoBeforeEnd';
 
 /**
@@ -39,7 +40,7 @@ export default function VideoBackground({src, type, onBeforeEnded}: VideoBackgro
       initial={{opacity: 0, scale: 1.5}}
       animate={{opacity: 1, scale: 1}}
       exit={{opacity: 0, scale: 1.3}}
-      transition={{duration: 0.75, type: 'easeOut'}}
+      transition={{duration: TransitionDuration.LONG, type: 'easeOut'}}
       ref={ref}
     >
       <source

components/pages/Teachers/Teacher.tsx

@@ -1,7 +1,3 @@
-/**
- * @file Represents UI block with teacher's photo.
- */
-
 import {m} from 'framer-motion';
 import clsx from 'clsx';
 import {useHover} from '@/lib/shared/useHover';

components/pages/Teachers/TeacherInfo.tsx

@@ -1,10 +1,7 @@
-/**
- * @file Represents UI with information about teacher.
- */
-
 import {memo} from 'react';
 import clsx from 'clsx';
 import {m} from 'framer-motion';
+import TransitionDuration from '@/lib/framerMotion/TransitionDuration';
 import {TeachersListConfigItem} from './teachersListConfig';
 
 /**
@@ -47,7 +44,7 @@ function TeacherInfo({isVisible, name, danceStyles, subtitle}: TeacherInfoProps)
       className={containerCn}
       animate={isVisible ? 'visible' : 'hidden'}
       variants={containerVariants}
-      transition={{duration: 0.5}}
+      transition={{duration: TransitionDuration.MEDIUM, ease: 'easeOut'}}
     >
       <div className={nameCn}>{name}</div>
       <div>{subtitle}</div>

components/pages/Teachers/Teachers.tsx

@@ -1,7 +1,3 @@
-/**
- * @file Organizes {@link Teacher} components in a grid.
- */
-
 'use client';
 
 import clsx from 'clsx';
@@ -18,7 +14,7 @@ export default function Teachers() {
   return (
     <AppearInViewport
       className={containerCn}
-      transition={{staggerChildren: 0.2, delayChildren: 0.5}}
+      transition={{staggerChildren: 0.2, delayChildren: 0.75}}
     >
       {teachersListConfig.map(teacher => (
         <Teacher

components/shared/AppearInViewport/AppearInViewport.tsx

@@ -2,6 +2,7 @@
 
 import {HTMLMotionProps, Variants, m} from 'framer-motion';
 import {ReactNode, forwardRef} from 'react';
+import TransitionDuration from '@/lib/framerMotion/TransitionDuration';
 
 // eslint-disable-next-line jsdoc/require-jsdoc
 type SafeHTMLMotionProps = Omit<
@@ -21,7 +22,7 @@ const defaultVariants: Variants = {
   hidden: {opacity: 0},
 };
 
-const defaultTransition = {duration: 0.5, delay: 0.3};
+const defaultTransition = {duration: TransitionDuration.MEDIUM, delay: 0.3};
 
 /**
  * @param {AppearOnScreenProps} props Props.

components/shared/Loader/Loader.tsx

@@ -4,6 +4,7 @@ import {OnScreen} from '@ukorvl/react-on-screen';
 import clsx from 'clsx';
 import {ComponentProps} from 'react';
 import PuffLoader from 'react-spinners/PuffLoader';
+import TransitionDuration from '@/lib/framerMotion/TransitionDuration';
 
 /**
  * Loader size.
@@ -23,7 +24,7 @@ type LoaderProps = {
 const containerBaseCn = clsx(
   'flex justify-content-center align-items-center p-4',
   'transition-opacity',
-  'duration-300',
+  `duration-${TransitionDuration.SHORT}`,
 );
 // eslint-disable-next-line jsdoc/require-jsdoc
 const containerCn = (isOnScreen: boolean) =>

components/shared/ScrollToTop/ScrollToTop.tsx

@@ -6,6 +6,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCircleArrowUp} from '@fortawesome/free-solid-svg-icons';
 import clsx from 'clsx';
 import {isPrefersReducedMotion} from '@/utils/isPrefersReducedMotion';
+import TransitionDuration from '@/lib/framerMotion/TransitionDuration';
 
 /**
  * Props.
@@ -40,7 +41,7 @@ export default function ScrollToTopButton({offset = 1000, ...position}: ScrollTo
       initial="hidden"
       animate={visible ? 'visible' : 'hidden'}
       variants={variants}
-      transition={{duration: 0.5, ease: 'easeOut'}}
+      transition={{duration: TransitionDuration.MEDIUM, ease: 'easeOut'}}
       onClick={() => scrollToTop(!isPrefersReducedMotion)}
       aria-hidden={true}
       style={position}

lib/framerMotion/TransitionDuration.ts

@@ -0,0 +1,11 @@
+/**
+ * @description Transition duration in seconds.
+ */
+const enum TransitionDuration {
+  SHORT = 0.25,
+  MEDIUM = 0.5,
+  LONG = 1,
+  VERY_LONG = 2.5,
+}
+
+export default TransitionDuration;