{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\user\\\\Desktop\\\\000newport\\\\src\\\\components\\\\crea5.js\",\n  _s = $RefreshSig$();\nimport React, { useEffect, useState } from \"react\";\nimport gsap from \"gsap\";\nimport Test from \"./tests\";\nimport { Flip } from \"gsap/Flip\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nimport { Fragment as _Fragment } from \"react/jsx-dev-runtime\";\nconst Crea5 = () => {\n  _s();\n  useEffect(() => {\n    gsap.registerPlugin(Flip);\n    const box = document.querySelector(\".bouge\");\n    const contain = document.querySelector(\".contain\");\n    const newContain = document.querySelector(\".recept\");\n    document.querySelector(\".button\").addEventListener(\"click\", () => {\n      const state = Flip.getState(box);\n\n      // Utilisez \"contains\" pour vérifier si un élément est déjà un enfant du conteneur\n      const currentContainer = box.parentNode;\n      const targetContainer = currentContainer === contain ? newContain : contain;\n      if (!targetContainer.contains(box)) {\n        targetContainer.appendChild(box);\n      }\n      Flip.from(state, {\n        duration: 1,\n        ease: \"power1.inOut\",\n        // Correction de la valeur ease\n        scale: true\n      });\n    });\n\n    // Créez une animation GSAP pour l'effet d'overscroll vertical\n    const triggerElement = document.querySelector('.js-scroll-list');\n    const contentElement = document.querySelector('.js-scroll-content');\n\n    // Écoutez le défilement\n    triggerElement.addEventListener('scroll', () => {\n      // Obtenez la position de défilement verticale\n      const scrollTop = triggerElement.scrollTop;\n\n      // Si le défilement atteint le haut de la liste, activez l'animation\n      if (scrollTop === 0) {\n        // Créez une animation GSAP ici\n        gsap.to(contentElement, {\n          y: -10,\n          // Ajustez la valeur de déplacement vertical\n          ease: 'none',\n          rotationX: 360,\n          duration: 3\n        });\n      }\n    });\n  }, []);\n  return /*#__PURE__*/_jsxDEV(_Fragment, {\n    children: [/*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"wrapper mb-96\",\n      children: /*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"scroll-list js-scroll-list h-72  overflow-scroll \",\n        children: [/*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"scroll-list__wrp js-scroll-content h-72 overflow-hidden\",\n          children: /*#__PURE__*/_jsxDEV(\"div\", {\n            className: \"h-96 w-96 border bg-purple-600 text-7xl\",\n            children: \"Javascript\"\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 79,\n            columnNumber: 15\n          }, this)\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 78,\n          columnNumber: 13\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"scroll-list__wrp js-scroll-content h-72 overflow-hidden\",\n          children: /*#__PURE__*/_jsxDEV(\"div\", {\n            className: \"h-96 w-96 border bg-purple-500 text-7xl\",\n            children: \"taiwlind\"\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 82,\n            columnNumber: 15\n          }, this)\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 81,\n          columnNumber: 13\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"scroll-list__wrp js-scroll-content h-72 overflow-hidden\",\n          children: /*#__PURE__*/_jsxDEV(\"div\", {\n            className: \"h-96 w-96 border bg-purple-300 text-7xl\",\n            children: \"react\"\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 85,\n            columnNumber: 15\n          }, this)\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 84,\n          columnNumber: 13\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"scroll-list__wrp js-scroll-content h-72 overflow-hidden\",\n          children: /*#__PURE__*/_jsxDEV(\"div\", {\n            className: \"h-96 w-96 border bg-purple-900 text-7xl\",\n            children: \"truc\"\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 88,\n            columnNumber: 15\n          }, this)\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 87,\n          columnNumber: 13\n        }, this)]\n      }, void 0, true, {\n        fileName: _jsxFileName,\n        lineNumber: 76,\n        columnNumber: 11\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 75,\n      columnNumber: 9\n    }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"flipy h-96 w-full  \",\n      children: [/*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"flex flex-wrap w-full space-x-6\",\n        children: [/*#__PURE__*/_jsxDEV(\"div\", {\n          className: \" fli h-32 w-32 bg-teal-600\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 96,\n          columnNumber: 17\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \" fli h-32 w-32 bg-teal-200\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 97,\n          columnNumber: 17\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \" fli h-32 w-32 bg-teal-900\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 98,\n          columnNumber: 17\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \" fli h-32 w-32 bg-teal-300\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 99,\n          columnNumber: 17\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \" fli h-32 w-32 bg-teal-400\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 100,\n          columnNumber: 17\n        }, this)]\n      }, void 0, true, {\n        fileName: _jsxFileName,\n        lineNumber: 95,\n        columnNumber: 13\n      }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"but\",\n        children: /*#__PURE__*/_jsxDEV(\"button\", {\n          children: \"change\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 103,\n          columnNumber: 17\n        }, this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 102,\n        columnNumber: 13\n      }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n        children: [/*#__PURE__*/_jsxDEV(\"button\", {\n          className: \"button\",\n          children: \"Bouton\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 107,\n          columnNumber: 7\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"bouge\",\n          children: \"Bouge moi\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 108,\n          columnNumber: 7\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"contain\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 109,\n          columnNumber: 7\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"recept\",\n          children: \"Conteneur 2\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 112,\n          columnNumber: 7\n        }, this)]\n      }, void 0, true, {\n        fileName: _jsxFileName,\n        lineNumber: 106,\n        columnNumber: 13\n      }, this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 94,\n      columnNumber: 9\n    }, this), /*#__PURE__*/_jsxDEV(Test, {}, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 119,\n      columnNumber: 9\n    }, this)]\n  }, void 0, true);\n};\n_s(Crea5, \"OD7bBpZva5O2jO+Puf00hKivP7c=\");\n_c = Crea5;\nexport default Crea5;\nvar _c;\n$RefreshReg$(_c, \"Crea5\");","map":{"version":3,"names":["React","useEffect","useState","gsap","Test","Flip","jsxDEV","_jsxDEV","Fragment","_Fragment","Crea5","_s","registerPlugin","box","document","querySelector","contain","newContain","addEventListener","state","getState","currentContainer","parentNode","targetContainer","contains","appendChild","from","duration","ease","scale","triggerElement","contentElement","scrollTop","to","y","rotationX","children","className","fileName","_jsxFileName","lineNumber","columnNumber","_c","$RefreshReg$"],"sources":["C:/Users/user/Desktop/000newport/src/components/crea5.js"],"sourcesContent":["\r\nimport React, { useEffect, useState } from \"react\";\r\nimport  gsap  from \"gsap\";\r\nimport Test from \"./tests\";\r\nimport { Flip } from \"gsap/Flip\";\r\n\r\n\r\n\r\nconst Crea5 = () => {\r\n \r\n    useEffect(() => {\r\n\r\n        gsap.registerPlugin(Flip);\r\n\r\n        const box = document.querySelector(\".bouge\");\r\n        const contain = document.querySelector(\".contain\");\r\n        const newContain = document.querySelector(\".recept\");\r\n    \r\n        document.querySelector(\".button\").addEventListener(\"click\", () => {\r\n          const state = Flip.getState(box);\r\n    \r\n          // Utilisez \"contains\" pour vérifier si un élément est déjà un enfant du conteneur\r\n          const currentContainer = box.parentNode;\r\n          const targetContainer = currentContainer === contain ? newContain : contain;\r\n    \r\n          if (!targetContainer.contains(box)) {\r\n            targetContainer.appendChild(box);\r\n          }\r\n    \r\n          Flip.from(state, {\r\n            duration: 1,\r\n            ease: \"power1.inOut\", // Correction de la valeur ease\r\n            scale: true,\r\n          });\r\n        });\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n        // Créez une animation GSAP pour l'effet d'overscroll vertical\r\n        const triggerElement = document.querySelector('.js-scroll-list');\r\n        const contentElement = document.querySelector('.js-scroll-content');\r\n    \r\n        // Écoutez le défilement\r\n        triggerElement.addEventListener('scroll', () => {\r\n          // Obtenez la position de défilement verticale\r\n          const scrollTop = triggerElement.scrollTop;\r\n    \r\n          // Si le défilement atteint le haut de la liste, activez l'animation\r\n          if (scrollTop === 0) {\r\n            // Créez une animation GSAP ici\r\n            gsap.to(contentElement, {\r\n              y: -10, // Ajustez la valeur de déplacement vertical\r\n              ease: 'none',\r\n              rotationX:360,\r\n              duration:3\r\n\r\n            });\r\n          }\r\n        });\r\n      }, []);\r\n    \r\n      return (\r\n\r\n        <>\r\n        \r\n        \r\n        <div className=\"wrapper mb-96\">\r\n          <div className=\"scroll-list js-scroll-list h-72  overflow-scroll \">\r\n\r\n            <div className=\"scroll-list__wrp js-scroll-content h-72 overflow-hidden\">\r\n              <div className=\"h-96 w-96 border bg-purple-600 text-7xl\">Javascript</div>\r\n            </div>\r\n            <div className=\"scroll-list__wrp js-scroll-content h-72 overflow-hidden\">\r\n              <div className=\"h-96 w-96 border bg-purple-500 text-7xl\">taiwlind</div>\r\n            </div>\r\n            <div className=\"scroll-list__wrp js-scroll-content h-72 overflow-hidden\">\r\n              <div className=\"h-96 w-96 border bg-purple-300 text-7xl\">react</div>\r\n            </div>\r\n            <div className=\"scroll-list__wrp js-scroll-content h-72 overflow-hidden\">\r\n              <div className=\"h-96 w-96 border bg-purple-900 text-7xl\">truc</div>\r\n            </div>\r\n          </div>\r\n             \r\n        </div>\r\n\r\n        <div className=\"flipy h-96 w-full  \">\r\n            <div className=\"flex flex-wrap w-full space-x-6\">\r\n                <div className=\" fli h-32 w-32 bg-teal-600\"></div>\r\n                <div className=\" fli h-32 w-32 bg-teal-200\"></div>\r\n                <div className=\" fli h-32 w-32 bg-teal-900\"></div>\r\n                <div className=\" fli h-32 w-32 bg-teal-300\"></div>\r\n                <div className=\" fli h-32 w-32 bg-teal-400\"></div>\r\n            </div>\r\n            <div className=\"but\">\r\n                <button>change</button>\r\n            </div>\r\n\r\n            <div>\r\n      <button className=\"button\">Bouton</button>\r\n      <div className=\"bouge\">Bouge moi</div>\r\n      <div className=\"contain\">\r\n\r\n      </div>\r\n      <div className=\"recept\">Conteneur 2</div>\r\n    </div>\r\n             \r\n\r\n        </div>\r\n        \r\n\r\n        <Test/>\r\n        </>\r\n      );\r\n    };\r\n\r\n\r\n\r\n  \r\n \r\n\r\n\r\n\r\n\r\nexport default Crea5;\r\n\r\n\r\n"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}