Draggable setting bounds not working properly

[ragingrahul]

In this project https://stackblitz.com/edit/nextjs-byp7rq?file=README.md after I set the bounds, in the sliderRef div the width is being set disproportionately and a lot of space is left on the left side of the cards and after animation, the cards are getting pushed to the right. How can this be fixed, and the cards can be centered the code inspiration for the draggable part is taken from the above-mentioned codepen.


Edit:I know for react i need to use gsap context which i will do later

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

[mvaneijgen]

24 minutes ago, ragingrahul said:

Edit:I know for react i need to use gsap context which i will do later

 

Well, this fixes most of the issues React users experience, so it isn't really something you can do 'later'.

 

What file should we be looking at? Your link shares the README.md file in which no GSAP code is present. 

[ragingrahul]

My bad https://stackblitz.com/edit/nextjs-byp7rq?file=Component%2FCarousel.js is the file.

 

 

[Cassie]

My suggestion would be to take a look at our React articles, use refs, useLayoutEffecrt and gsap.context - then check back in if you still have any issues.

99% of the issues we see with React are fixed by setting up the code correctly!

-----

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://greensock.com/react

Happy tweening!

[ragingrahul]

i added the animations inside the gsap.context but am still facing the same issue 
Here is the stackblitz link-https://stackblitz.com/edit/nextjs-byp7rq?file=Component%2FCarousel.js

The animation will be properly visible after the webcontainer is opened in a seperate tab

[Rodrigo]

Hi,

 

There is definitely something wrong in your demo that is not really related to GSAP itself but how you're setting things up.

 

Here is a super simple example that is working as it should:

https://stackblitz.com/edit/vitejs-vite-2mu48z

 

Unfortunately we don't have the time resources to o through complex demos and find specific issues and/or problems in them, since is beyond the help we can provide in these free forums. I strongly recommend you to get your demo working in the simplest possible way first and then start adding other parts to it.

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

One other thing to keep in mind: only the animations/Draggables/ScrollTriggers that are created when your gsap.context() function is invoked will get added to the context (and get reverted when ctx.revert() is subsequently called). It looks like you're creating additional ones AFTER that function is invoked, like inside an onPress or onDrag or onDragEnd. Those won't get reverted the way you've got it set up now. To make sure those get added to the context properly, make sure you do ctx.add(() => {...your code here...}) as explained in the docs. 

[ragingrahul]

13 hours ago, Rodrigo said:

Hi,

 

There is definitely something wrong in your demo that is not really related to GSAP itself but how you're setting things up.

 

Here is a super simple example that is working as it should:

https://stackblitz.com/edit/vitejs-vite-2mu48z

 

Unfortunately we don't have the time resources to o through complex demos and find specific issues and/or problems in them, since is beyond the help we can provide in these free forums. I strongly recommend you to get your demo working in the simplest possible way first and then start adding other parts to it.

 

Hopefully this helps.

Happy Tweening!

is there any other way of of achieving the same without the use of InertiaPlugin?

[Rodrigo]

Hi,

 

It can definitely be done but not without some effort. You'd have to bake in a similar approach in your project. Unfortunately that's beyond the help we can provide in these free forums since we don't have the time resources to tackle such complex task.

 

I would suggest you to contact us for paid consulting or post in the Jobs & Freelance forums, but most likely you will spend more money on paying someone to create such feature than in a Club GreenSock membership that would give you access to all the bonus plugins for a full year, which normally pays itself with one or two projects, then is all profits.

 

Good luck with your project!

Happy Tweening!