{"ast":null,"code":"import React,{useEffect,useState}from\"react\";import gsap from\"gsap\";import Test from\"./tests\";import{Flip}from\"gsap/Flip\";import{jsx as _jsx}from\"react/jsx-runtime\";import{jsxs as _jsxs}from\"react/jsx-runtime\";import{Fragment as _Fragment}from\"react/jsx-runtime\";var Crea5=function Crea5(){useEffect(function(){gsap.registerPlugin(Flip);var box=document.querySelector(\".bouge\");var contain=document.querySelector(\".contain\");var newContain=document.querySelector(\".recept\");document.querySelector(\".button\").addEventListener(\"click\",function(){var state=Flip.getState(box);// Utilisez \"contains\" pour vérifier si un élément est déjà un enfant du conteneur\nvar currentContainer=box.parentNode;var targetContainer=currentContainer===contain?newContain:contain;if(!targetContainer.contains(box)){targetContainer.appendChild(box);}Flip.from(state,{duration:1,ease:\"power1.inOut\",// Correction de la valeur ease\nscale:true});});// Créez une animation GSAP pour l'effet d'overscroll vertical\nvar triggerElement=document.querySelector('.js-scroll-list');var contentElement=document.querySelector('.js-scroll-content');// Écoutez le défilement\ntriggerElement.addEventListener('scroll',function(){// Obtenez la position de défilement verticale\nvar scrollTop=triggerElement.scrollTop;// Si le défilement atteint le haut de la liste, activez l'animation\nif(scrollTop===0){// Créez une animation GSAP ici\ngsap.to(contentElement,{y:-10,// Ajustez la valeur de déplacement vertical\nease:'none',rotationX:360,duration:3});}});},[]);return/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"div\",{className:\"wrapper mb-96\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"scroll-list js-scroll-list h-72  overflow-scroll \",children:[/*#__PURE__*/_jsx(\"div\",{className:\"scroll-list__wrp js-scroll-content h-72 overflow-hidden\",children:/*#__PURE__*/_jsx(\"div\",{className:\"h-96 w-96 border bg-purple-600 text-7xl\",children:\"Javascript\"})}),/*#__PURE__*/_jsx(\"div\",{className:\"scroll-list__wrp js-scroll-content h-72 overflow-hidden\",children:/*#__PURE__*/_jsx(\"div\",{className:\"h-96 w-96 border bg-purple-500 text-7xl\",children:\"taiwlind\"})}),/*#__PURE__*/_jsx(\"div\",{className:\"scroll-list__wrp js-scroll-content h-72 overflow-hidden\",children:/*#__PURE__*/_jsx(\"div\",{className:\"h-96 w-96 border bg-purple-300 text-7xl\",children:\"react\"})}),/*#__PURE__*/_jsx(\"div\",{className:\"scroll-list__wrp js-scroll-content h-72 overflow-hidden\",children:/*#__PURE__*/_jsx(\"div\",{className:\"h-96 w-96 border bg-purple-900 text-7xl\",children:\"truc\"})})]})}),/*#__PURE__*/_jsxs(\"div\",{className:\"flipy h-96 w-full  \",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"flex flex-wrap w-full space-x-6\",children:[/*#__PURE__*/_jsx(\"div\",{className:\" fli h-32 w-32 bg-teal-600\"}),/*#__PURE__*/_jsx(\"div\",{className:\" fli h-32 w-32 bg-teal-200\"}),/*#__PURE__*/_jsx(\"div\",{className:\" fli h-32 w-32 bg-teal-900\"}),/*#__PURE__*/_jsx(\"div\",{className:\" fli h-32 w-32 bg-teal-300\"}),/*#__PURE__*/_jsx(\"div\",{className:\" fli h-32 w-32 bg-teal-400\"})]}),/*#__PURE__*/_jsx(\"div\",{className:\"but\",children:/*#__PURE__*/_jsx(\"button\",{children:\"change\"})}),/*#__PURE__*/_jsxs(\"div\",{children:[/*#__PURE__*/_jsx(\"div\",{className:\"bouge\",children:\"Bouge moi\"}),/*#__PURE__*/_jsx(\"button\",{className:\"button\",children:\"Bouton\"}),/*#__PURE__*/_jsx(\"div\",{className:\"contain\"}),/*#__PURE__*/_jsx(\"div\",{className:\"recept\",children:\"Conteneur 2\"})]})]}),/*#__PURE__*/_jsx(Test,{})]});};export default Crea5;","map":{"version":3,"names":["React","useEffect","useState","gsap","Test","Flip","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Crea5","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"],"sources":["C:/Users/user/Desktop/02portreact/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      <div className=\"bouge\">Bouge moi</div>\r\n      <button className=\"button\">Bouton</button>\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":[]}