slides opacity

Vizzuality · Jun 13, 2024 · 1ae95cd · 1ae95cd
1 parent 0a5804b
commit 1ae95cd
Show file tree

Hide file tree

Showing 8 changed files with 137 additions and 28 deletions.
diff --git a/marketing/package.json b/marketing/package.json
@@ -33,7 +33,7 @@
     "axios": "0.21.1",
     "classnames": "2.3.1",
     "d3-format": "^3.1.0",
-    "framer-motion": "6.3.11",
+    "framer-motion": "6",
     "next": "12.1.0",
     "next-compose-plugins": "^2.2.1",
     "next-optimized-images": "^2.6.2",
@@ -55,6 +55,7 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
+    "@egjs/flicking-plugins": "4.7.1",
     "@types/d3-format": "^3.0.1",
     "@types/node": "16.11.6",
     "@types/react": "17.0.5",

diff --git a/marketing/src/components/carousel/component.tsx b/marketing/src/components/carousel/component.tsx
@@ -2,6 +2,8 @@ import React, { ReactElement, useEffect, useRef, useState, cloneElement } from '
 
 import Flicking, { ERROR_CODE, FlickingError } from '@egjs/react-flicking';
 
+import { Fade } from '@egjs/flicking-plugins';
+
 export interface CarouselProps {
   slide: number;
   slides: {
@@ -27,6 +29,7 @@ export const Carousel: React.FC<CarouselProps> = ({
   const slider = useRef(null);
   const timer = useRef(null);
   const [pause, setPause] = useState(false);
+  const plugings = new Fade();
 
   useEffect(() => {
     if (timer.current) clearInterval(timer.current);
@@ -98,7 +101,7 @@ export const Carousel: React.FC<CarouselProps> = ({
           onWillChange={({ index }) => {
             if (onChange) onChange(index);
           }}
-          {...options}
+          {...{ ...options, plugins: [plugings] }}
         >
           {slides.map((sl) => {
             return cloneElement(sl.content, {

diff --git a/marketing/src/components/cookies/component.tsx b/marketing/src/components/cookies/component.tsx
@@ -1,4 +1,4 @@
-import { AnimatePresence, motion } from 'framer-motion';
+import { motion } from 'framer-motion';
 import Link from 'next/link';
 
 import type { CookiesProps } from './types';
@@ -7,7 +7,8 @@ import Button from 'components/button';
 
 export const CookieModal: React.FC<CookiesProps> = ({ open, onAccept, onReject }: CookiesProps) => {
   return (
-    <AnimatePresence>
+    // <AnimatePresence>
+    <>
       {open && (
         <div>
           <motion.div
@@ -56,7 +57,7 @@ export const CookieModal: React.FC<CookiesProps> = ({ open, onAccept, onReject }
           </motion.div>
         </div>
       )}
-    </AnimatePresence>
+    </>
   );
 };
 

diff --git a/marketing/src/components/modal/component.tsx b/marketing/src/components/modal/component.tsx
@@ -1,7 +1,7 @@
 import { useRef } from 'react';
 
 import classNames from 'classnames';
-import { AnimatePresence, motion } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { XIcon } from '@heroicons/react/solid';
 import { FocusScope } from '@react-aria/focus';
 import { useOverlay, usePreventScroll, useModal, OverlayContainer } from '@react-aria/overlays';
@@ -32,7 +32,7 @@ export const Modal: React.FC<ModalProps> = ({
   usePreventScroll({ isDisabled: !open });
 
   return (
-    <AnimatePresence>
+    <>
       {open && (
         <OverlayContainer>
           <motion.div
@@ -101,7 +101,7 @@ export const Modal: React.FC<ModalProps> = ({
           </motion.div>
         </OverlayContainer>
       )}
-    </AnimatePresence>
+    </>
   );
 };
 

diff --git a/marketing/src/containers/header/nav/component.tsx b/marketing/src/containers/header/nav/component.tsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 
 import cx from 'classnames';
 import { useMediaMatch } from 'rooks';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion } from 'framer-motion';
 
 import lockScroll from 'react-lock-scroll';
 import Icon from 'components/icon/component';
@@ -21,7 +21,8 @@ const HeaderNav: React.FC<NavProps> = ({ open }: NavProps) => {
   lockScroll(!isLg && open);
 
   return (
-    <AnimatePresence>
+    // <AnimatePresence>
+    <>
       {(open || isLg) && (
         <motion.nav
           initial={{
@@ -189,7 +190,7 @@ const HeaderNav: React.FC<NavProps> = ({ open }: NavProps) => {
           </div>
         </motion.nav>
       )}
-    </AnimatePresence>
+    </>
   );
 };
 

diff --git a/marketing/src/containers/repository/discover-our-journey/component.tsx b/marketing/src/containers/repository/discover-our-journey/component.tsx
@@ -18,6 +18,7 @@ import { SLIDES } from './slides';
 
 const DiscoverOurJourney: FC = () => {
   const [slide, setSlide] = useState(0);
+
   return (
     <section className="relative py-12 space-y-12 bg-blue-600 bg-cover md:space-y-64 md:py-36 overflow-hidden text-white">
       <Wrapper>
@@ -46,25 +47,29 @@ const DiscoverOurJourney: FC = () => {
                   Discover our journey
                 </h2>
                 <Link href="/contact">
-                  <a className="flex space-x-4 text-orange-500 font-semibold items-center">
+                  <a
+                    className="flex space-x-4 text-orange-500 font-semibold items-center cursor-pointer"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
                     <span>Discover more about us</span>
                     <Icon icon={ARROW_SVG} className="w-4 h-4 fill-orange-500 -rotate-45" />
                   </a>
                 </Link>
               </div>
 
-              <div>
+              <div className="w-full">
                 <Carousel
                   slide={slide}
                   slides={SLIDES}
                   onChange={(i) => {
                     setSlide(i);
                   }}
-                  autoplay={10000}
+                  autoplay={0}
                   options={{
                     duration: 0,
                     circular: false,
-                    moveType: 'freeScroll',
+                    align: 'prev',
                   }}
                 />
 
@@ -92,6 +97,7 @@ const DiscoverOurJourney: FC = () => {
                         key={sl.id}
                         type="button"
                         aria-label="dot-element"
+                        disabled={slide === i}
                         onClick={() => {
                           setSlide(i);
                         }}

diff --git a/marketing/src/containers/repository/resources/webinar/component.tsx b/marketing/src/containers/repository/resources/webinar/component.tsx
@@ -5,10 +5,19 @@ import FadeIn from 'components/fade';
 import Link from 'next/link';
 import Icon from 'components/icon';
 
+import { motion } from 'framer-motion';
+
 import ARROW_SVG from 'svgs/ui/arrow-right.svg?sprite';
 
 import { DATA } from './constants';
 
+const arrowMotion = {
+  initial: { x: 0 },
+  animate: { x: 5 },
+  hover: { x: 20 },
+  transition: { duration: 0.5, ease: 'easeInOut' },
+};
+
 const Webinar: React.FC = () => (
   <section className="relative bg-white">
     <Wrapper>
@@ -31,15 +40,20 @@ const Webinar: React.FC = () => (
             ))}
             <li key="webinar" className="flex flex-col space-y-4 bg-orange-500 p-[35px]">
               <p className="font-light">Watch our webinar on demand to learn more</p>
-              <Link href="https://bit.ly/3GbWOMa">
-                <a
-                  className="underline space-x-5 font-bold flex items-center"
+              <Link href="https://bit.ly/3GbWOMa" passHref>
+                <motion.a
+                  whileHover="hover"
+                  initial="initial"
+                  animate="animate"
+                  className="underline space-x-5 font-bold flex items-center hover:font-black"
                   target="_blank"
                   rel="noreferrer noopener"
                 >
                   <span>Join us</span>
-                  <Icon icon={ARROW_SVG} className="w-14 h-10" />
-                </a>
+                  <motion.div variants={arrowMotion}>
+                    <Icon icon={ARROW_SVG} className="w-14 h-10" />
+                  </motion.div>
+                </motion.a>
               </Link>
             </li>
           </ul>

diff --git a/marketing/yarn.lock b/marketing/yarn.lock
@@ -330,6 +330,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@egjs/flicking-plugins@npm:4.7.1":
+  version: 4.7.1
+  resolution: "@egjs/flicking-plugins@npm:4.7.1"
+  peerDependencies:
+    "@egjs/flicking": ^4.1.0
+  checksum: 3f94e5b62d00e6ca8664fa8610792bd217383d7a19b2b947c5099bbd1f9ac129cbd029590e86d4141dbec1aa6b75f9490dac0f2baff78f603341de63d4d4f246
+  languageName: node
+  linkType: hard
+
 "@egjs/flicking@npm:~4.9.0":
   version: 4.9.0
   resolution: "@egjs/flicking@npm:4.9.0"
@@ -634,6 +643,71 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@motionone/animation@npm:^10.12.0":
+  version: 10.18.0
+  resolution: "@motionone/animation@npm:10.18.0"
+  dependencies:
+    "@motionone/easing": ^10.18.0
+    "@motionone/types": ^10.17.1
+    "@motionone/utils": ^10.18.0
+    tslib: ^2.3.1
+  checksum: 841cb9f4843a89e5e4560b9f960f52cbe78afc86f87c769f71e9edb3aadd53fb87982b7e11914428f228b29fd580756be531369c2ffac06432550afa4e87d1c3
+  languageName: node
+  linkType: hard
+
+"@motionone/dom@npm:10.12.0":
+  version: 10.12.0
+  resolution: "@motionone/dom@npm:10.12.0"
+  dependencies:
+    "@motionone/animation": ^10.12.0
+    "@motionone/generators": ^10.12.0
+    "@motionone/types": ^10.12.0
+    "@motionone/utils": ^10.12.0
+    hey-listen: ^1.0.8
+    tslib: ^2.3.1
+  checksum: 123356f28e44362c4f081aae3df22e576f46bfcb07e01257b2ac64a115668448f29b8de67e4b6e692c5407cffb78ffe7cf9fa1bc064007482bab5dd23a69d380
+  languageName: node
+  linkType: hard
+
+"@motionone/easing@npm:^10.18.0":
+  version: 10.18.0
+  resolution: "@motionone/easing@npm:10.18.0"
+  dependencies:
+    "@motionone/utils": ^10.18.0
+    tslib: ^2.3.1
+  checksum: 6bd37f7a9d5a88f868cc0ad6e47d2ba8d9fefd7da84fccfea7ed77ec08c2e6d1e42df88dda462665102a5cf03f748231a1a077de7054b5a8ccb0fbf36f61b1e7
+  languageName: node
+  linkType: hard
+
+"@motionone/generators@npm:^10.12.0":
+  version: 10.18.0
+  resolution: "@motionone/generators@npm:10.18.0"
+  dependencies:
+    "@motionone/types": ^10.17.1
+    "@motionone/utils": ^10.18.0
+    tslib: ^2.3.1
+  checksum: 51a0e075681697b11d0771998cac8c76a745f00141502f81adb953896992b7f49478965e4afe696bc83361afaae8d2f1057d71c25b21035fe67258ff73764f1c
+  languageName: node
+  linkType: hard
+
+"@motionone/types@npm:^10.12.0, @motionone/types@npm:^10.17.1":
+  version: 10.17.1
+  resolution: "@motionone/types@npm:10.17.1"
+  checksum: 3fa74db64e371e61a7f7669d7d541d11c9a8dd871032d59c69041e3b2e07a67ad2ed8767cb9273bac90eed4e1f76efc1f14c8673c2e9a288f6070ee0fef64a25
+  languageName: node
+  linkType: hard
+
+"@motionone/utils@npm:^10.12.0, @motionone/utils@npm:^10.18.0":
+  version: 10.18.0
+  resolution: "@motionone/utils@npm:10.18.0"
+  dependencies:
+    "@motionone/types": ^10.17.1
+    hey-listen: ^1.0.8
+    tslib: ^2.3.1
+  checksum: a27f9afde693a0cbbbcb33962b12bbe40dd2cfa514b0732f3c7953c5ef4beed738e1e8172a2de89e3b9f74a253ef0a70d7f3efb730be97b77d7176a3ffacb67a
+  languageName: node
+  linkType: hard
+
 "@mrmlnc/readdir-enhanced@npm:^2.2.1":
   version: 2.2.1
   resolution: "@mrmlnc/readdir-enhanced@npm:2.2.1"
@@ -2186,9 +2260,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.30001196, caniuse-lite@npm:^1.0.30001283, caniuse-lite@npm:^1.0.30001313":
-  version: 1.0.30001313
-  resolution: "caniuse-lite@npm:1.0.30001313"
-  checksum: 49f2dcd1fa493a09a5247dcf3a4da3b9df355131b1fc1fd08b67ae7683c300ed9b9eef6a5424b4ac7e5d1ff0e129d2a0b4adf2a6a5a04ab5c2c0b2c590e935be
+  version: 1.0.30001633
+  resolution: "caniuse-lite@npm:1.0.30001633"
+  checksum: 718607f5d335ed26a469b03aaf059aec3352d81d6a974888122310d76c29ff0820e9bf57f16a1eb65693f8cef405e3a18a6257591ee1e5642865a4cb1a27cd4c
   languageName: node
   linkType: hard
 
@@ -3602,11 +3676,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"framer-motion@npm:6.3.11":
-  version: 6.3.11
-  resolution: "framer-motion@npm:6.3.11"
+"framer-motion@npm:6":
+  version: 6.5.1
+  resolution: "framer-motion@npm:6.5.1"
   dependencies:
     "@emotion/is-prop-valid": ^0.8.2
+    "@motionone/dom": 10.12.0
     framesync: 6.0.1
     hey-listen: ^1.0.8
     popmotion: 11.0.3
@@ -3618,7 +3693,7 @@ __metadata:
   dependenciesMeta:
     "@emotion/is-prop-valid":
       optional: true
-  checksum: 2333b296a109ec0ef86421453f66a92b63e07930a491102f1007bbe48f40594d8c51a96ca937f8f3f013ba658147049bf1fa9feebc44487b8e7617bb674fb254
+  checksum: 737959063137b4ccafe01e0ac0c9e5a9531bf3f729f62c34ca7a5d7955e6664f70affd22b044f7db51df41acb21d120a4f71a860e17a80c4db766ad66f2153a1
   languageName: node
   linkType: hard
 
@@ -4919,6 +4994,7 @@ __metadata:
   resolution: "landgriffon-marketing-v2@workspace:."
   dependencies:
     "@artsy/fresnel": ^3.5.0
+    "@egjs/flicking-plugins": 4.7.1
     "@egjs/react-flicking": ^4.9.0
     "@floating-ui/react-dom": ^0.7.0
     "@heroicons/react": 1.0.6
@@ -4946,7 +5022,7 @@ __metadata:
     eslint-config-next: 12.0.2
     eslint-config-prettier: 8.3.0
     eslint-plugin-prettier: 3.4.0
-    framer-motion: 6.3.11
+    framer-motion: 6
     istanbul-reports: 3.0.0
     next: 12.1.0
     next-compose-plugins: ^2.2.1
@@ -7947,6 +8023,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:^2.3.1":
+  version: 2.6.3
+  resolution: "tslib@npm:2.6.3"
+  checksum: 74fce0e100f1ebd95b8995fbbd0e6c91bdd8f4c35c00d4da62e285a3363aaa534de40a80db30ecfd388ed7c313c42d930ee0eaf108e8114214b180eec3dbe6f5
+  languageName: node
+  linkType: hard
+
 "tsutils@npm:^3.21.0":
   version: 3.21.0
   resolution: "tsutils@npm:3.21.0"