add base animation

romantrukhtanov · Nov 18, 2023 · 6ba1b90 · 6ba1b90
1 parent b58c8d5
commit 6ba1b90
Show file tree

Hide file tree

Showing 29 changed files with 535 additions and 185 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -199,6 +199,7 @@
     "@mui/lab": "^5.0.0-alpha.124",
     "@mui/material": "~5.12.0",
     "@popperjs/core": "^2.10.2",
+    "@react-spring/web": "^9.7.3",
     "@samkirkland/ftp-deploy": "^1.2.3",
     "build-route-tree": "^1.0.2",
     "classnames": "^2.3.1",

diff --git a/src/features/quiz/view/Quiz/Quiz.tsx b/src/features/quiz/view/Quiz/Quiz.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
+import { animated, useSpring } from '@react-spring/web';
 
 import { useFeature } from 'features/featureProvider';
 import { useResetScroll } from 'shared/view/hooks/useResetScroll';
@@ -17,9 +18,17 @@ export const Quiz = observer(function Quiz({ playMarquee, redirectTo }: Props) {
 
   const elementRef = useResetScroll([currentIndex]);
 
+  const spring = useSpring({
+    from: {
+      opacity: 0,
+    },
+    opacity: 1,
+    delay: 300,
+  });
+
   return (
-    <div className={styles.root} ref={elementRef}>
+    <animated.div className={styles.root} ref={elementRef} style={spring}>
       <QuizLayout playMarquee={playMarquee} redirectTo={redirectTo} />
-    </div>
+    </animated.div>
   );
 });
diff --git a/src/pages/About/About.tsx b/src/pages/About/About.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import { Trans } from 'react-i18next';
+import { animated } from '@react-spring/web';
 import { observer } from 'mobx-react-lite';
 
 import { useService } from 'services/servicesProvider';
 import { InnerBlock } from 'pages/shared/InnerBlock/InnerBlock';
 import { Wallet } from 'features/about/view/Wallet/Wallet';
 import { BankCard } from 'features/about/view/BankCard/BankCard';
+import { getDefaultConfig, useSpringOnce } from 'shared/animations/useSpringOnce';
 import { wallets, bankCards } from 'features/about/constants';
 
 import { AboutIcon } from './AboutIcon/AboutIcon';
@@ -16,6 +18,13 @@ export const About = observer(function About() {
   const { selectedLanguage } = useService('settings');
   const translations = tKeys.pages.about;
 
+  const bottomSpring = useSpringOnce(
+    'about-bottom-spring',
+    getDefaultConfig({ y: '50%', duration: 750 }),
+  );
+
+  const iconSpring = useSpringOnce('about-icon', getDefaultConfig({ x: '20%', duration: 750 }));
+
   return (
     <InnerBlock
       title={t(translations.title)}
@@ -25,14 +34,14 @@ export const About = observer(function About() {
     >
       <div className={styles.root}>
         <div className={styles.content}>
-          <div className={styles.description}>
+          <animated.div className={styles.description} style={bottomSpring}>
             <Trans
               className={styles.text}
               i18nKey={translations.description}
               tOptions={{ transKeepBasicHtmlNodesFor: ['br'] }}
             />
-          </div>
-          <div className={styles.supportProject}>
+          </animated.div>
+          <animated.div className={styles.supportProject} style={bottomSpring}>
             <div className={styles.supportProjectTitle}>
               <p className={styles.text}>{t(translations.supportProject)}</p>
             </div>
@@ -41,8 +50,8 @@ export const About = observer(function About() {
                 <BankCard key={`${bankCard.name}_${bankCard.address}`} bankCard={bankCard} />
               ))}
             </div>
-          </div>
-          <div className={styles.wallets}>
+          </animated.div>
+          <animated.div className={styles.wallets} style={bottomSpring}>
             <div className={styles.walletsTitle}>
               <p className={styles.text}>{t(translations.cryptoWallets)}</p>
             </div>
@@ -51,12 +60,12 @@ export const About = observer(function About() {
                 <Wallet key={`${wallet.currency}_${wallet.address}`} wallet={wallet} />
               ))}
             </div>
-          </div>
+          </animated.div>
         </div>
 
-        <div className={styles.icon}>
+        <animated.div className={styles.icon} style={iconSpring}>
           <AboutIcon />
-        </div>
+        </animated.div>
       </div>
     </InnerBlock>
   );

diff --git a/src/pages/About/AboutIcon/AboutIcon.module.scss b/src/pages/About/AboutIcon/AboutIcon.module.scss
@@ -7,8 +7,10 @@
   width: R.rem(200px);
   height: R.rem(200px);
 
-
   @include D.desktop {
+    position: sticky;
+    top: calc(50vh - #{R.rem(175px)});
+
     width: R.rem(350px);
     height: R.rem(350px);
   }

diff --git a/src/pages/Categories/Categories.tsx b/src/pages/Categories/Categories.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
+import { animated } from '@react-spring/web';
 
 import { useService } from 'services/servicesProvider';
 import { useFeature } from 'features/featureProvider';
+import { getDefaultConfig, useSpringOnce } from 'shared/animations/useSpringOnce';
 import { InnerBlock } from 'pages/shared/InnerBlock/InnerBlock';
 import * as M from 'services/questions/mobx/model';
 
@@ -16,23 +18,30 @@ export const Categories = observer(function Categories() {
   const { resetQuiz } = useFeature('quiz');
   const translations = tKeys.pages.categories;
 
+  const spring = useSpringOnce('categories-list', getDefaultConfig({ y: '70%', duration: 750 }));
+
+  const iconSpring = useSpringOnce(
+    'categories-icon',
+    getDefaultConfig({ x: '20%', duration: 750 }),
+  );
+
   return (
     <InnerBlock title={t(translations.title)} aria-label="categories">
       <div className={styles.root}>
         <ul className={styles.list}>
           {Object.keys(categories).map(categoryName => (
-            <li key={categoryName} className={styles.item}>
+            <animated.li key={categoryName} className={styles.item} style={spring}>
               <Category
                 categoryKey={categoryName as M.Category}
                 questionsAmount={categories[categoryName as M.Category].length}
                 onClick={handleCategoryClick}
               />
-            </li>
+            </animated.li>
           ))}
         </ul>
-        <div className={styles.icon}>
+        <animated.div className={styles.icon} style={iconSpring}>
           <CategoryIcon />
-        </div>
+        </animated.div>
       </div>
     </InnerBlock>
   );

diff --git a/src/pages/Categories/CategoryIcon/CategoryIcon.module.scss b/src/pages/Categories/CategoryIcon/CategoryIcon.module.scss
@@ -4,10 +4,14 @@
 @use 'src/shared/view/styles/devices' as D;
 
 .root {
+
   width: R.rem(200px);
   height: R.rem(200px);
 
   @include D.desktop {
+    position: sticky;
+    top: calc(50vh - #{R.rem(175px)});
+
     width: R.rem(350px);
     height: R.rem(350px);
   }

diff --git a/src/pages/Main/Main.tsx b/src/pages/Main/Main.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { animated } from '@react-spring/web';
 import { observer } from 'mobx-react-lite';
 import cn from 'classnames';
 
@@ -7,6 +8,7 @@ import { Socials } from 'pages/shared/Socials/Socials';
 import { Policeman } from 'shared/view/components/Policeman';
 import { Speedometer } from 'shared/view/components/Speedometer';
 import { Car } from 'shared/view/components/Car';
+import { useSpringOnce, getDefaultConfig } from 'shared/animations/useSpringOnce';
 
 import { StartButton } from './StartButton/StartButton';
 import styles from './Main.module.scss';
@@ -17,30 +19,56 @@ export const Main = observer(function Main() {
   const translations = tKeys.pages.main;
   const sharedTranslations = tKeys.shared;
 
+  const leftSpring = useSpringOnce(
+    'main-left-spring',
+    getDefaultConfig({ x: '-150%', duration: 1000 }),
+  );
+  const bottomSpring = useSpringOnce(
+    'main-bottom-spring',
+    getDefaultConfig({ y: '150%', duration: 1000 }),
+  );
+  const bottomSmallSpring = useSpringOnce(
+    'main-bottom-small-spring',
+    getDefaultConfig({ y: '20%' }),
+  );
+  const topSpring = useSpringOnce('main-top-spring', getDefaultConfig({ y: '-100%' }));
+  const opacitySpring = useSpringOnce('main-opacity-spring', getDefaultConfig({ opacity: 0 }));
+
   return (
-    <section className={styles.root}>
+    <animated.section className={styles.root} style={opacitySpring}>
       <div className={styles.titleWrapper}>
-        <Car />
-        <h1 className={cn(styles.title, { [styles.small]: selectedLanguage === 'uzk' })}>
+        <animated.div style={opacitySpring}>
+          <Car />
+        </animated.div>
+        <animated.h1
+          className={cn(styles.title, { [styles.small]: selectedLanguage === 'uzk' })}
+          style={isMobile ? undefined : bottomSmallSpring}
+        >
           {t(translations.title)}
-        </h1>
+        </animated.h1>
       </div>
-      <div className={styles.socials}>
+      <animated.div className={styles.socials} style={leftSpring}>
         <Socials direction={isMobile ? 'horizontal' : 'vertical'} />
-      </div>
-      <div className={styles.policeman}>
+      </animated.div>
+      <animated.div className={styles.policeman} style={bottomSpring}>
         <Policeman />
-      </div>
-      {isDesktop && <div className={styles.copyright}>{t(sharedTranslations.copyright)}</div>}
+      </animated.div>
       {isDesktop && (
-        <div className={styles.speedometer}>
-          <Speedometer />
+        <div className={styles.copyright}>
+          <animated.div style={topSpring}>{t(sharedTranslations.copyright)}</animated.div>
         </div>
       )}
+      {isDesktop && (
+        <animated.div className={styles.speedometer} style={opacitySpring}>
+          <Speedometer />
+        </animated.div>
+      )}
       <footer className={styles.footer}>
-        <StartButton />
+        <animated.div style={bottomSpring}>
+          <StartButton />
+        </animated.div>
         {isMobile && <div className={styles.copyright}>{t(sharedTranslations.copyright)}</div>}
       </footer>
-    </section>
+    </animated.section>
   );
 });
diff --git a/src/pages/Router/Layout/Layout.tsx b/src/pages/Router/Layout/Layout.tsx
@@ -5,6 +5,7 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 import { useScrollRestoration } from 'shared/view/hooks/useScrollRestoration';
 import { ErrorBoundary } from 'pages/shared/ErrorBoundary/ErrorBoundary';
 import { PageHeader } from 'pages/shared/PageHeader/PageHeader';
+import { Sphere } from 'shared/view/components/Sphere';
 import { lazyfy } from 'shared/helpers/lazyfy';
 
 import styles from './Layout.module.scss';
@@ -76,7 +77,7 @@ export const Layout = observer(function Layout() {
           <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>
       </main>
-      <div className={styles.sphere} />
+      <Sphere />
     </div>
   );
 });