{"ast":null,"code":"import { jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useEffect, useState, useRef } from 'react';\nimport cn from 'classnames';\nimport gsap from 'gsap';\nimport Logo from 'components/header/Logo';\nimport styles from './OnBoarding.module.scss';\nimport Strip from './Strip';\nimport { useMouse } from 'beautiful-react-hooks';\nconst ease = 'power3';\n\nconst OnBoarding = ({}) => {\n  // TODO: guess user's language, default to FR\n  // let user switch language??\n  // show onBoarding only once? determined by, cookie?\n  const logoRef = useRef();\n  const baselineRef = useRef();\n  const pics = [{\n    ref: useRef(),\n    delta: 0.1,\n    src: 'https://www.colivingfactory.com/assets/coresider/images/2.png'\n  }, {\n    ref: useRef(),\n    delta: 0.37,\n    src: 'https://www.colivingfactory.com/assets/coresider/images/3.png'\n  }, {\n    ref: useRef(),\n    delta: 0.14,\n    src: 'https://www.colivingfactory.com/assets/coresider/images/4.png'\n  }, {\n    ref: useRef(),\n    delta: 0.05,\n    src: 'https://www.colivingfactory.com/assets/coresider/images/5.png'\n  }, {\n    ref: useRef(),\n    delta: 0.3,\n    src: 'https://www.colivingfactory.com/assets/coresider/images/6.png'\n  }, {\n    ref: useRef(),\n    delta: 0.23,\n    src: 'https://www.colivingfactory.com/assets/coresider/images/7.png'\n  }];\n  const stripsRef = useRef();\n  const strips = [{\n    ref: useRef(),\n    delta: 0.55,\n    color: '#DD4F13',\n    title: 'Bien aborder et bien vivre\\nles moments de transition.\\n\\u00A0'\n  }, {\n    ref: useRef(),\n    delta: 1,\n    color: '#BCC8CC',\n    title: 'Faciliter et améliorer\\nle quotidien de chaque\\npersonne.'\n  }, {\n    ref: useRef(),\n    delta: 0,\n    color: '#F1CDCD',\n    title: 'Créer des nouveau liens\\npour rompre l’isolement et\\ns’epanouir avec les autres.'\n  }, {\n    ref: useRef(),\n    delta: 0.45,\n    color: '#8E95BD',\n    title: 'Manifeste.\\n\\u00A0\\n\\u00A0'\n  }];\n  const {\n    0: animInComplete,\n    1: setAnimInComplete\n  } = useState(false);\n  useEffect(() => {\n    baselineRef.current.style.opacity = 0;\n    const stageWidth = window.innerWidth;\n    const stageHeight = window.innerHeight;\n    const duration = 1.5;\n    let tlDelay = 0; // - - - - - - - - - - - - - - - - - - - - - Logo & baseline\n\n    const pause = 0.1;\n    const moveY = 50;\n    const tl = gsap.timeline();\n    tl.to(logoRef.current, {\n      delay: pause,\n      duration,\n      ease: ease + '.in',\n      opacity: 0,\n      y: -moveY\n    });\n    tl.fromTo(baselineRef.current, {\n      opacity: 0,\n      y: moveY\n    }, {\n      duration,\n      ease: ease + '.out',\n      opacity: 1,\n      y: 0\n    });\n    tl.to(baselineRef.current, {\n      delay: pause,\n      duration,\n      ease: ease + '.in',\n      opacity: 0,\n      y: -moveY\n    });\n    tlDelay += tl.duration() - duration * 0.3; // - - - - - - - - - - - - - - - - - - - - - pics\n\n    const tlPics = gsap.timeline({\n      delay: tlDelay\n    });\n\n    for (let i = 0; i < pics.length; i++) {\n      const pic = pics[i];\n      const picEl = pic.ref.current;\n      tlPics.fromTo(picEl, {\n        x: 10 + i / pics.length * (stageWidth - picEl.width) + Math.random() * 50,\n        y: stageHeight + 100 + Math.random() * 250\n      }, {\n        duration: duration * 1.3 + Math.random() * 0.2,\n        ease: ease + '.in',\n        y: -picEl.height - 100 - Math.random() * 250\n      }, pic.delta * 2);\n    }\n\n    tlDelay += tlPics.duration() * 0.78; // - - - - - - - - - - - - - - - - - - - - - 4 strips\n\n    const tlStrips = gsap.timeline({\n      delay: tlDelay,\n      onComplete: () => {\n        setAnimInComplete(true);\n      }\n    });\n\n    for (let i = 0; i < strips.length; i++) {\n      const strip = strips[i];\n      const stripEl = strip.ref.current;\n      tlStrips.fromTo(stripEl, {\n        y: 100 + strip.delta * 50 + '%'\n      }, {\n        duration: duration * 0.8,\n        ease: ease + '.out',\n        y: 0\n      }, strip.delta * 0.08);\n    }\n  }, []); // const animStrip = (stripRef, opening) => {\n  // \tgsap.to(stripRef.current, {\n  // \t\tduration: 0.3,\n  // \t\tease: 'power3.out',\n  // \t\tflex: opening ? 2 : 1,\n  // \t})\n  // }\n\n  const {\n    0: stripOverIndex,\n    1: setStripOverIndex\n  } = useState(-1);\n\n  const onMouseEventOnStrip = (index, isOver) => {\n    console.log('index.js::134 onMouseEventOnStrip index', stripOverIndex, index, isOver);\n\n    if (index == stripOverIndex && !isOver) {\n      setStripOverIndex(-1);\n    } else if (index != stripOverIndex && isOver) {\n      setStripOverIndex(index);\n    } // if (index != stripOverIndex) {\n    // \tif (stripOverIndex != -1) {\n    // \t\tanimStrip(strips[stripOverIndex].ref, false)\n    // \t}\n    // \tanimStrip(strips[index].ref, true)\n    // \tsetStripOverIndex(index)\n    // }\n\n  };\n\n  return /*#__PURE__*/_jsx(\"div\", {\n    className: cn(styles.container),\n    children: /*#__PURE__*/_jsxs(\"section\", {\n      className: cn(styles.onBoarding),\n      children: [/*#__PURE__*/_jsx(\"div\", {\n        className: cn(styles.centered),\n        ref: logoRef,\n        children: /*#__PURE__*/_jsx(Logo, {\n          className: styles.logo\n        })\n      }), /*#__PURE__*/_jsx(\"div\", {\n        className: cn(styles.centered),\n        ref: baselineRef,\n        children: /*#__PURE__*/_jsx(\"span\", {\n          className: cn(styles.baseline),\n          children: \"un nouveau mode d\\u2019habitat\"\n        })\n      }), /*#__PURE__*/_jsx(\"div\", {\n        className: cn(styles.pics),\n        children: pics.map(item => /*#__PURE__*/_jsx(\"img\", {\n          ref: item.ref,\n          src: item.src,\n          className: cn(styles.pic)\n        }, item.src))\n      }), /*#__PURE__*/_jsx(\"div\", {\n        className: cn(styles.strips),\n        ref: stripsRef,\n        children: strips.map((item, i) => /*#__PURE__*/_jsx(Strip, {\n          ref: item.ref,\n          color: item.color,\n          title: item.title,\n          active: animInComplete //onMouseOver={() => setStripOverIndex(i)}\n          // opened={i == stripOverIndex}\n          ,\n          onMouseEvent: isOver => onMouseEventOnStrip(i, isOver),\n          noneOpen: stripOverIndex == -1\n        }, item.color))\n      })]\n    })\n  });\n};\n\nexport default OnBoarding;","map":null,"metadata":{},"sourceType":"module"}