ragingrahul

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

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

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

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

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

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

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

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