Santhosh02

I'm trying to get the current index of the slides form the scrollTrigger carousel animation. useEffect(() => { let sections = gsap.utils.toArray(".panel"); const pin = gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", duration: 2, scrollTrigger: { trigger: triggerRef.current, pin: true, scrub: true, snap: 1 / (sections.length - 1), end: () => "+=" + sectionRef.current.offsetWidth, onUpdate: (scrollTrigger) => { const scrollPosition = scrollTrigger.scrollLeft; const containerWidth = sectionRef.current.offsetWidth; const index = Math.round(scrollPosition / containerWidth); console.log("Current Index:", index); }, }, }); I'm trying with onUpdate property, But nothing works. I'm getting NaN. Any suggestion on this guys ?

@Rodrigo Hi, Thanks for the help. My last question is, When I go up and down past the section, There is an effect like it's slowly comes back to the section again. Can we remove it and make it as pin at the start of the section without that effect ? or is it a default value ? I've tried a lot but it's breaking the UI.

@mvaneijgen No I'm just trying to implement the codepen code in my local. In code pen, The background colour, height, width has no styles but the result UI has those things. Where are they coming from ? ALso I've updated the codesandbox https://codesandbox.io/s/elated-swartz-4clp44?file=/src/App.js. Kindly look at it.

@mvaneijgen When I try to implement the second example you gave in my react application, It's not working properly. the container class is used in the CSS, But there is no class name is declared in the HTML file. It kind of breaks my application. Could you throw some suggestions on it ?

I want to create an horizontal scroll for a particular section as in this sandbox code url. But I cannot achieve the effect by when I scroll once, The next element should come with full of it's width and so on. Here it is scrolling little by little. I want to make it to scroll the each slide with it's full width like carousel. Any help on this would be appreciated.

Sorry for not providing any code pen. I'm new to GSAP. I'm trying to do an animation like this website with yellow element scaling. But I don't know how to implement it. I've checked the documentation but the ScrollingTrigger property in not for free usage. SO how to achieve this animation otherwise. Any help on this would be appreciated.