add lotties

wevisdemo · Dec 12, 2023 · 5fea8db · 5fea8db
1 parent 99134ca
commit 5fea8db
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 6 deletions.
diff --git a/components/SectionIntro.tsx b/components/SectionIntro.tsx
@@ -8,20 +8,25 @@ import { usePage } from '@/hooks/usePage';
 import ScrollHint from './ScrollHint';
 import IconWithBg from './IconWithBg';
 import ArrowDown from './ArrowDown';
+import Lottie from 'lottie-react';
+import paperLAnimation from '@/public/lotties/paper_l.json';
+import paperRAnimation from '@/public/lotties/paper_r.json';
 
 export default function SectionIntro() {
   const { menuTabs, updatedDate } = useSnapshot(state);
   const { goToSection } = usePage();
 
   return (
     <div className="relative overflow-x-hidden pb-14 lg:overflow-x-visible">
-      <CustomImg
-        src="/images/paper_intro.webp"
-        className="absolute -left-5 top-24 z-10 w-[78px] lg:top-[150px] lg:w-[260px]"
+      <Lottie
+        animationData={paperLAnimation}
+        loop={true}
+        className="absolute -left-5 top-0 z-10 w-[78px] lg:w-[260px]"
       />
-      <CustomImg
-        src="/images/paper_intro.webp"
-        className="absolute -right-5 top-24 z-10 w-[78px] -scale-x-100 lg:top-[150px] lg:w-[260px]"
+      <Lottie
+        animationData={paperRAnimation}
+        loop={true}
+        className="absolute -right-5 top-0 z-10 w-[78px] lg:w-[260px]"
       />
       <div className="relative bg-grey3 pt-10 lg:pt-[100px]">
         <CustomImg

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@wevisdemo/ui": "^7.0.0",
     "framer-motion": "^10.16.4",
     "lodash": "^4.17.21",
+    "lottie-react": "^2.4.0",
     "next": "14.0.0",
     "react": "^18",
     "react-dom": "^18",

diff --git a/public/images/paper_intro.webp b/public/images/paper_intro.webp
diff --git a/public/lotties/paper_l.json b/public/lotties/paper_l.json
diff --git a/public/lotties/paper_r.json b/public/lotties/paper_r.json