why the slides inside the slides-wrapper dont slide on scrolling?

[zeyad tamer]

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%;
}

 

[GSAP Helper]

Hi there! I see you're using React -

Proper animation cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once.

Here's the structure:

// typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start.
useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    // all your GSAP animation code here
  });
  return () => ctx.revert(); // <- cleanup!
}, []);

This pattern follows React's best practices, and one of the React team members chimed in here if you'd like more background.

We strongly recommend reading the React information we've put together at https://gsap.com/resources/React/

 

Finally we have a new useGSAP hook that should make integrating GSAP in React projects super easy:

https://www.npmjs.com/package/@gsap/react

 

Happy tweening!

[zeyad tamer]

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

 

[GSAP Helper]

Give it a try and if you still need some help, please make sure you provide a minimal demo (like a Stackblitz or Codepen) so we can see the issue in context. Here's a React starter template (please read this article!)

[zeyad tamer]

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?

 

[GreenSock]

You need to provide some kind of minimal demo that illustrates the issue - here's a simple CodePen you can fork: 

See the Pen OJmQvLZ by GreenSock (@GreenSock) on CodePen

 

I'm very surprised to hear that Stackblitz didn't work for you on the desktop - did I read that correctly? 

 

Here, I dropped your code into a demo and it seems to work fine: 

See the Pen NWoVBKZ?editors=1010 by GreenSock (@GreenSock) on CodePen

 

What's the problem? 

[zeyad tamer]

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

 

[GreenSock]

There must be some other issue with your code somewhere. We can't really troubleshoot without seeing a minimal demo. Make sure all your GSAP files are up to date and if you're still having trouble, make sure you post a minimal demo that clearly illustrates the problem and we'd be happy to take a look. 

[zeyad tamer]

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

 

 

[GreenSock]

You must find a way to show us what you're seeing. SOMETHING is different between that CodePen demo and your version. Maybe the CSS, the markup, a 3rd party tool that's interfering...something. Frankly, I doubt the issue has anything to do with GSAP (at least directly). But once we see the problem happening and can inspect the code/CSS/markup, we'll be able to understand it better. 

 

The art of troubleshooting always involves creating a minimal demo and if it works, then keep moving closer and closer to your "real" project (the one that's broken) until it breaks and then you discover what's really causing the issue. 

[GreenSock]

I wonder if you have CSS transitions applied to the elements you're controlling with GSAP. That would definitely interfere. You should never apply CSS transitions to the things that GSAP is controlling. 

[zeyad tamer]

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

1 hour ago, GreenSock said:

 

[Rodrigo]

Hi,

 

Unfortunately we don't have the time resources to provide general consulting. I'd strongly recommend you to start from something as simple as possible, perhaps a blank react app and start adding sections one by one, starting with the one you are animating with ScrollTrigger. Then add more stuff and test until it breaks, then you'll have the culprit.

 

Normally when an issue can't be replicated using codepen or stackblitz, means that something else in your app is breaking the animation or your setup.

 

Happy Tweening!

[GreenSock]

Yeah, I'd echo everything @Rodrigo said. A video really won't help here - we'd need to be able to inspect what's happening in the DOM, crack open Dev Tools, etc. We do offer paid consulting services, but I really think you'll be better off building up that minimal demo to be closer and closer to your real project until it breaks. 

 

Good luck!

[zeyad tamer]

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

Edited December 14, 2023 by zeyad tamer

[GreenSock]

I sent you a private message about the paid consulting options. 

 

If you took the exact same code that worked on CodePen, and put it into your project and it broke, that means there MUST be something else in your project that's breaking things. Again, that's why we strongly recommend that you start with a minimal demo, then if it works you slowly make changes to get it closer and closer (adding complexity) to your "real" project until it breaks. Then give us that demo so we can see why it's breaking. 

[zeyad tamer]

 i have replyed to your private message .

please see it