{"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: '600px',\n        // Largeur réduite au survol\n        height: '600px',\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    });\n    container.addEventListener('mouseleave', () => {\n      gsap.to(container, {\n        width: '1000px',\n        // Rétablir la largeur initiale\n        height: '1000px' // 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: \" bg-pink-500 overflow-hidden\",\n      ref: containerRef,\n      children: [/*#__PURE__*/_jsxDEV(\"h3\", {\n        children: \"passion\"\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 44,\n        columnNumber: 7\n      }, this), /*#__PURE__*/_jsxDEV(\"h1\", {\n        className: \"flex\",\n        ref: h1Ref,\n        children: \"text text text text\"\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 45,\n        columnNumber: 7\n      }, this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 43,\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","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: '600px', // Largeur réduite au survol\r\n        height: '600px', // 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    \r\n    });\r\n\r\n    container.addEventListener('mouseleave', () => {\r\n      gsap.to(container, {\r\n        width: '1000px', // Rétablir la largeur initiale\r\n        height: '1000px', // 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     <div className=\" bg-pink-500 overflow-hidden\" ref={containerRef}>\r\n      <h3>passion</h3>\r\n      <h1 className=\"flex\" ref={h1Ref}>text text text text</h1>\r\n    </div>\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,OAAO;QAAE;QAChBC,MAAM,EAAE,OAAO;QAAE;QACjBC,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;IAEJ,CAAC,CAAC;IAEFZ,SAAS,CAACK,gBAAgB,CAAC,YAAY,EAAE,MAAM;MAC7Cf,IAAI,CAACgB,EAAE,CAACN,SAAS,EAAE;QACjBO,KAAK,EAAE,QAAQ;QAAE;QACjBC,MAAM,EAAE,QAAQ,CAAE;MACpB,CAAC,CAAC;;MACFlB,IAAI,CAACa,GAAG,CAACD,EAAE,EAAE;QAAEE,OAAO,EAAE,CAAC;QAAEM,CAAC,EAAE;MAAE,CAAC,CAAC;IACpC,CAAC,CAAC;EACJ,CAAG,CAAC;EAGJ,oBACEjB,OAAA,CAAAE,SAAA;IAAAkB,QAAA,eACCpB,OAAA;MAAKqB,SAAS,EAAC,8BAA8B;MAACC,GAAG,EAAEjB,YAAa;MAAAe,QAAA,gBAC/DpB,OAAA;QAAAoB,QAAA,EAAI;MAAO;QAAAG,QAAA,EAAAC,YAAA;QAAAC,UAAA;QAAAC,YAAA;MAAA,OAAI,CAAC,eAChB1B,OAAA;QAAIqB,SAAS,EAAC,MAAM;QAACC,GAAG,EAAEhB,KAAM;QAAAc,QAAA,EAAC;MAAmB;QAAAG,QAAA,EAAAC,YAAA;QAAAC,UAAA;QAAAC,YAAA;MAAA,OAAI,CAAC;IAAA;MAAAH,QAAA,EAAAC,YAAA;MAAAC,UAAA;MAAAC,YAAA;IAAA,OACtD;EAAC,gBACJ,CAAC;AAEP,CAAC;AAACtB,EAAA,CA5CID,KAAK;AAAAwB,EAAA,GAALxB,KAAK;AA6CX,eAAeA,KAAK;AAAC,IAAAwB,EAAA;AAAAC,YAAA,CAAAD,EAAA"},"metadata":{},"sourceType":"module","externalDependencies":[]}