zeyad tamer

i have replyed to your private message . please see it

the proplem that i tried the same idea at 4 react projects and with very very simple ideas like you sent on code pen but when i took the code and run it it gived me the same wierd behaviour in the 4 ideas that i have made. the problem is that their is no errors in console to tell me what i missed and i sent the ideas that i make to chat GPT and he revised the code and telled me that their is no errors . iam really sad that i dont know how to make you see what i see on screen but i took the exactly same code and putted it in the App component without any additional components and without any additional code and runed it and it dont work as it work in code pen. can i contact to any one of you privatly and send you a video and the code to fix the error and if you wanna money to help their is no problem. thanks for your replying

i didnt apply any transition of css to the animated gsap elements ,all what i did is that i take the exact same code of react and css from code pen and putted them in vscode and runed them , and i found that the scroll in code pen is perfect and work as i expected but when i tried it in vscode i found many weird behaviours on scroll. how i can show you what i see on screen on my local host to understand what i mean? can i connect with you privatley and see how to solve or can i send a video to what iam seeing on screen?? and thanks for your quick reply

minimal demo wont help because the code works correctly in code pen but in local host using vite their is a werid behaviours on scrolling like the divs are disappearing and when i go up it show again so what should i do as the code i wrote in vs code is the exact same one in code pen

what is so weird how does the code work in code pen and how does the divs are translating on scrolling. i take the same code and copied it in vs code and runed it in the browser and it gives me a weird behavior on scroll and the slides are disapeared on scrolling and when the scroll complete the slides appears but when i scroll the slides disappear and it make a weird behavior on scrolling

i gived a try and used gsap.context() and the issue still, stackblitz dont open with me on mobile and on the pc . what should i do?

does this will fix the issue in the console and it will solve the scrolling issue??

import { useEffect } from 'react'; import gsap from 'gsap'; import './App.css'; import ScrollTrigger from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger) function App() { useEffect(()=>{ const slides = document.querySelectorAll(".slide"); gsap.to(slides, { xPercent: -100 * (slides.length - 1), duration: 10, scrollTrigger: { trigger: ".wrapper", scrub: 1, pin: true, end:"+=6000" }, }); },[]) return ( <> <div className='space'></div> <div className="wrapper"> <div className="slider"> <div className="slides-wrapper"> { Array(5).fill("").map((_,idx) => ( <div key={idx} className="slide"> <div className="content"> <h1>You Must Be Happy</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, inventore esse. Voluptate eveniet autem excepturi incidunt sed laborum odio error ut, veritatis quam dolor et dolore asperiores eum voluptatibus ullam amet esse eius magni ducimus deserunt odit? Vel, cumque esse.</p> </div> </div> )) } </div> </div> </div> <div className='space'></div> </> ) } export default App; * { margin: 0; padding: 0; box-sizing: border-box; } body { background: wheat; color: #141414; } .wrapper { width: 100%; } .slider { width: 100%; height: 100vh; overflow: hidden; } .slides-wrapper { width: max-content; height: 100vh; display: flex; } .slide { width: 100vw; padding: 40px; height: 100vh; } .slide .content { display: flex; width: 100%; height: 100%; flex-direction: column; justify-content: space-around; background: rgb(240, 207, 146); border-radius: 15px; padding: 40px; } .content h1 { font-size: 5em; } .space { background-color: lightblue; height: 100vh; width: 100%; }

import { useEffect } from 'react'; import gsap from 'gsap'; import './App.css'; import ScrollTrigger from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger) function App() { useEffect(()=>{ const texts = gsap.utils.toArray(".red") texts.forEach(text => { gsap.fromTo(text,{ opacity:0, }, { opacity:1, duration:1, scrollTrigger: { trigger:text.parentElement, start:"top center", scrub:1 } }) }) },[]) const text = "may be the quick brown fox who jumbed over the box" return ( <> <div className='text-holder'> { text.split(" ").map((txt , idx) => ( <div className="txt" key={idx}> <i className={`red`}>{txt}</i> </div> )) } </div> </> ) } export default App; App.jsx:17 Invalid property scrollTrigger set to {trigger: div.txt, start: 'top center', scrub: 1}scrub: 1start: "top center"trigger: div.txt[[Prototype]]: Object Missing plugin? gsap.registerPlugin() _missingPlugin2 @ gsap-core.js:89 _scrollTrigger2 @ gsap-core.js:441 Tween2 @ gsap-core.js:3329 _createTweenType2 @ gsap-core.js:633 fromTo @ gsap-core.js:3639 (anonymous) @ App.jsx:17 (anonymous) @ App.jsx:16 commitHookEffectListMount @ react-dom.development.js:23150 invokePassiveEffectMountInDEV @ react-dom.development.js:25154 invokeEffectsInDev @ react-dom.development.js:27351 commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27330 flushPassiveEffectsImpl @ react-dom.development.js:27056 flushPassiveEffects @ react-dom.development.js:26984 (anonymous) @ react-dom.development.js:26769 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533 Show 5 more frames Show less gsap-core.js:1275 [Violation] 'requestAnimationFrame' handler took 83ms every time i open the console i find this error and the animations didnt work if the triggered element reachs the viewport