[Scroll Trigger Pin is jumpy]

Thank you!!
Also what might be the reason for the animation to break after refreshInit event is called even though the animations are called inside gsap.context?

[Scroll Trigger Pin is jumpy]

I have this scrollTrigger animation where when pinning the the div that is getting pinned is bouncy, its not much prominent when you pin while entering the animation, but when animation ends and it unpins and exactly at that moment, if its scrolled up and the div is again pinned thats when its more jumpy.
i did use anticipate pin and saw it might be due to margin stacking so, removed margins too for 1 div.

Other than that, i have a set of json animations, which are taking time it initialize(approx 600ms ), as i am calculation where the end of the ScrollTrigger should be based on that json animations width, so i am finding it difficult on how should i call my animation function. Calling it instanteneously when

refreshInit is called it breaking the end width calculation

 

 

StackBlitz link-https://stackblitz.com/edit/nextjs-22dh7p?file=Component%2FCarousel.jsx

Edit:the whole animation breaks when the window is resized and refreshInit is called

 

[Gradient Bubbles floating around]

How can this be replicated in gsap and what should be the approach i should take to set the gradient values dynamically and also make the gradients linear but circular in shape

See the Pen rNLrMKj by dropside (@dropside) on CodePen

[Draggable setting bounds not working properly]

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?

[Draggable setting bounds not working properly]

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

[Draggable setting bounds not working properly]

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

 

 

[Draggable setting bounds not working properly]

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

[Please gsap.registerPlugin(Draggable) TypeError: _toArray is not a function]

Here is the minimal demo, tried all the things you mentioned and still  not working

https://stackblitz.com/edit/nextjs-byp7rq?file=pages%2Findex.js

[Please gsap.registerPlugin(Draggable) TypeError: _toArray is not a function]

i am getting the above mentioned error in next.js, i have looked it up and saw some solutions like registering the plugin in useLayoutEffect which i have tried but its not working, currently i have registered the plugin at the top when am importing gsap. Also even after facing the error everything works fine in the localhost, the only issue is the deploying to vercel due to the error it is not getting built

here is the code-https://github.com/ragingrahul/sphere-frontend/blob/main/src/app/Components/Content/HorizontalFeaturesCarousel.tsx/Carousel.tsx