{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\user\\\\Desktop\\\\000newport\\\\src\\\\components\\\\pages\\\\portfolio-page\\\\components\\\\Crea4.js\",\n _s = $RefreshSig$();\nimport React, { useEffect, useRef } from \"react\";\nimport { gsap } from \"gsap\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nimport { Fragment as _Fragment } from \"react/jsx-dev-runtime\";\nconst Crea4 = () => {\n _s();\n const containerRef = useRef(null);\n const h1Ref = useRef(null);\n useEffect(() => {\n const container = containerRef.current;\n const h1 = h1Ref.current;\n gsap.set(h1, {\n opacity: 0\n });\n container.addEventListener('mouseenter', () => {\n gsap.to(container, {\n width: '60px',\n // Largeur réduite au survol\n height: '60px',\n // Hauteur réduite au survol\n onComplete: () => {\n gsap.to(h1, {\n x: '100%',\n // Fait défiler le titre vers la droite\n opacity: 1,\n duration: 1,\n ease: 'power2.out'\n });\n }\n });\n gsap.to(h1, {\n x: '-100%',\n // Fait défiler le titre vers la gauche\n opacity: 0,\n duration: 0.5,\n ease: 'power2.in',\n delay: 1 // Attend 1 seconde avant de commencer le défilement\n });\n });\n\n container.addEventListener('mouseleave', () => {\n gsap.to(container, {\n width: '96px',\n // Rétablir la largeur initiale\n height: '94px' // Rétablir la hauteur initiale\n });\n\n gsap.set(h1, {\n opacity: 0,\n x: 0\n });\n });\n }, []);\n return /*#__PURE__*/_jsxDEV(_Fragment, {\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"w-96 h-94 bg-pink-500\",\n ref: containerRef,\n children: [/*#__PURE__*/_jsxDEV(\"h3\", {\n children: \"passion\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 50,\n columnNumber: 7\n }, this), /*#__PURE__*/_jsxDEV(\"h1\", {\n className: \"\",\n ref: h1Ref,\n children: \"text text text text\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 51,\n columnNumber: 7\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 49,\n columnNumber: 6\n }, this)\n }, void 0, false);\n};\n_s(Crea4, \"mlabldIZmdtZyBrR3M/GmFpYt+M=\");\n_c = Crea4;\nexport default Crea4;\nvar _c;\n$RefreshReg$(_c, \"Crea4\");","map":{"version":3,"names":["React","useEffect","useRef","gsap","ScrollTrigger","jsxDEV","_jsxDEV","Fragment","_Fragment","Crea4","_s","containerRef","h1Ref","container","current","h1","set","opacity","addEventListener","to","width","height","onComplete","x","duration","ease","delay","children","className","ref","fileName","_jsxFileName","lineNumber","columnNumber","_c","$RefreshReg$"],"sources":["C:/Users/user/Desktop/000newport/src/components/pages/portfolio-page/components/Crea4.js"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\r\nimport { gsap } from \"gsap\";\r\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\r\n\r\nconst Crea4 = () => {\r\n const containerRef = useRef(null);\r\n const h1Ref = useRef(null);\r\n\r\n useEffect(() => {\r\n const container = containerRef.current;\r\n const h1 = h1Ref.current;\r\n\r\n gsap.set(h1, { opacity: 0 });\r\n\r\n container.addEventListener('mouseenter', () => {\r\n gsap.to(container, {\r\n width: '60px', // Largeur réduite au survol\r\n height: '60px', // Hauteur réduite au survol\r\n onComplete: () => {\r\n gsap.to(h1, {\r\n x: '100%', // Fait défiler le titre vers la droite\r\n opacity: 1,\r\n duration: 1,\r\n ease: 'power2.out',\r\n });\r\n },\r\n });\r\n gsap.to(h1, {\r\n x: '-100%', // Fait défiler le titre vers la gauche\r\n opacity: 0,\r\n duration: 0.5,\r\n ease: 'power2.in',\r\n delay: 1, // Attend 1 seconde avant de commencer le défilement\r\n });\r\n });\r\n\r\n container.addEventListener('mouseleave', () => {\r\n gsap.to(container, {\r\n width: '96px', // Rétablir la largeur initiale\r\n height: '94px', // Rétablir la hauteur initiale\r\n });\r\n gsap.set(h1, { opacity: 0, x: 0 });\r\n });\r\n }, []);\r\n\r\n\r\n return (\r\n <>\r\n
\r\n

passion

\r\n

text text text text

\r\n
\r\n \r\n );\r\n};\r\nexport default Crea4;\r\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAChD,SAASC,IAAI,QAAQ,MAAM;AAC3B,SAASC,aAAa,QAAQ,oBAAoB;AAAC,SAAAC,MAAA,IAAAC,OAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAEnD,MAAMC,KAAK,GAAGA,CAAA,KAAM;EAAAC,EAAA;EAClB,MAAMC,YAAY,GAAGT,MAAM,CAAC,IAAI,CAAC;EACjC,MAAMU,KAAK,GAAGV,MAAM,CAAC,IAAI,CAAC;EAE1BD,SAAS,CAAC,MAAM;IACd,MAAMY,SAAS,GAAGF,YAAY,CAACG,OAAO;IACtC,MAAMC,EAAE,GAAGH,KAAK,CAACE,OAAO;IAExBX,IAAI,CAACa,GAAG,CAACD,EAAE,EAAE;MAAEE,OAAO,EAAE;IAAE,CAAC,CAAC;IAE5BJ,SAAS,CAACK,gBAAgB,CAAC,YAAY,EAAE,MAAM;MAC7Cf,IAAI,CAACgB,EAAE,CAACN,SAAS,EAAE;QACjBO,KAAK,EAAE,MAAM;QAAE;QACfC,MAAM,EAAE,MAAM;QAAE;QAChBC,UAAU,EAAEA,CAAA,KAAM;UAChBnB,IAAI,CAACgB,EAAE,CAACJ,EAAE,EAAE;YACVQ,CAAC,EAAE,MAAM;YAAE;YACXN,OAAO,EAAE,CAAC;YACVO,QAAQ,EAAE,CAAC;YACXC,IAAI,EAAE;UACR,CAAC,CAAC;QACJ;MACF,CAAC,CAAC;MACFtB,IAAI,CAACgB,EAAE,CAACJ,EAAE,EAAE;QACVQ,CAAC,EAAE,OAAO;QAAE;QACZN,OAAO,EAAE,CAAC;QACVO,QAAQ,EAAE,GAAG;QACbC,IAAI,EAAE,WAAW;QACjBC,KAAK,EAAE,CAAC,CAAE;MACZ,CAAC,CAAC;IACJ,CAAC,CAAC;;IAEFb,SAAS,CAACK,gBAAgB,CAAC,YAAY,EAAE,MAAM;MAC7Cf,IAAI,CAACgB,EAAE,CAACN,SAAS,EAAE;QACjBO,KAAK,EAAE,MAAM;QAAE;QACfC,MAAM,EAAE,MAAM,CAAE;MAClB,CAAC,CAAC;;MACFlB,IAAI,CAACa,GAAG,CAACD,EAAE,EAAE;QAAEE,OAAO,EAAE,CAAC;QAAEM,CAAC,EAAE;MAAE,CAAC,CAAC;IACpC,CAAC,CAAC;EACJ,CAAC,EAAE,EAAE,CAAC;EAGN,oBACEjB,OAAA,CAAAE,SAAA;IAAAmB,QAAA,eACCrB,OAAA;MAAKsB,SAAS,EAAC,uBAAuB;MAACC,GAAG,EAAElB,YAAa;MAAAgB,QAAA,gBACxDrB,OAAA;QAAAqB,QAAA,EAAI;MAAO;QAAAG,QAAA,EAAAC,YAAA;QAAAC,UAAA;QAAAC,YAAA;MAAA,OAAI,CAAC,eAChB3B,OAAA;QAAIsB,SAAS,EAAC,EAAE;QAACC,GAAG,EAAEjB,KAAM;QAAAe,QAAA,EAAC;MAAmB;QAAAG,QAAA,EAAAC,YAAA;QAAAC,UAAA;QAAAC,YAAA;MAAA,OAAI,CAAC;IAAA;MAAAH,QAAA,EAAAC,YAAA;MAAAC,UAAA;MAAAC,YAAA;IAAA,OAClD;EAAC,gBACJ,CAAC;AAEP,CAAC;AAACvB,EAAA,CAlDID,KAAK;AAAAyB,EAAA,GAALzB,KAAK;AAmDX,eAAeA,KAAK;AAAC,IAAAyB,EAAA;AAAAC,YAAA,CAAAD,EAAA"},"metadata":{},"sourceType":"module","externalDependencies":[]}