How can I add dynamic values without breaking the Horizontal scroll ?

[Arkaprava101]

Hello GSAP Team 😊

 

I was trying to create a horizontally scrollable slider with GSAP with dynamic elements being added each time I press a button / scroll till certain position.

 

-- Currently with the setup if I add some dynamic elements , entire thing disappears suddenly . But as soon as I scroll up all the way from bottom then it re-appears again . I don't why .

-- Also one more thing . Is there a way of knowing how much I have scrolled so that I can build the slider without the button , so if someone scrolls 70% then new data arrives automatically ? 

-- I will take this logic to build a fun project later where I will fetch some images and add those images in empty boxes later . 

 

 

👇👇👇 Link here

https://stackblitz.com/edit/vitejs-vite-4iordd?file=src%2FApp.jsx

[Cassie]

Heya! 

 

Looking into this but it's not proving simple, just a bump so you know you're not forgotten.

[Arkaprava101]

27 minutes ago, Cassie said:

Heya! 

 

Looking into this but it's not proving simple, just a bump so you know you're not forgotten.

Okay ! No problem ! Any help is appreciated 😊😊

[Rodrigo]

Hi,

 

The main problem here is that the DOM is not completely updated right after you change the state, you have to wait for the DOM to be updated before calling ScrollTrigger.refresh().

 

For that just create the Tween and the ScrollTrigger inside a useGSAP hook without dependencies and use a second useGSAP hook with the state property as a dependency to call the refresh method. You're looking for something like this:

useGSAP(() => {
  const root = document.querySelector('#root');
  gsap.to('.slider', {
    x: () =>
    -(
      sliderRef.current.scrollWidth - document.documentElement.clientWidth
    ) + 'px',
    ease: 'none',
    scrollTrigger: {
      trigger: '#root',
      scrub: 1,
      markers: true,
      start: 'top top',
      end: () => '+=' + sliderRef.current.offsetWidth,
      pin: true,
      invalidateOnRefresh: true,
    },
  });
});

useGSAP(
  () => {
    ScrollTrigger.refresh();
  },
  { dependencies: [count] }
);

Here is a fork of your demo:

https://stackblitz.com/edit/vitejs-vite-p12uuo?file=src%2FApp.jsx

 

Hopefully this helps.

Happy Tweening!

[Arkaprava101]

Thank you very much for your assistance, sir. It was very helpful. 😊😊😊

[Arkaprava101]

Sir can I ask one more thing ? if possible . 

 

Can you suggest me a tip for how can I keep track of how much a user has scrolled , so that later on when a user has scrolled 80% of the data , I can add more boxes automatically instead of pressing on that button?

[Rodrigo]

Hi,

 

This demo has the logic you're looking for:

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

 

Right here:

ScrollTrigger.create({
  trigger: "body",
  start: "top top",
  end: "max",
  onUpdate: (self) => {
    if (self.progress > 0.8 && self.direction > 0) {
      // Here update your state in React
    }
  }
});

Just update the state property and keep the second useGSAP hook with the ScrollTrigger.refresh() call intact.

 

Hopefully this helps.

Happy Tweening!

[Arkaprava101]

Thank you sir ! Thank you for all the help 😊😭😊