lrc

Hi Rodrigo, thanks so much for your quick response and super clear explanation! I find these forums so helpful. The snap is now working but I'm back with two follow-up questions if you don't mind! 1) Is there a way to know which option is the ‘selected’/ center one, in other words, which option was snapped to? We want to use this in order to update the activeIndex so we can apply different css styling to each option based on how far away it is from the selected option. 2) the scroll/snap animation feels a bit buggy in some cases, sometimes it scrolls to a different option than expected, especially when scrolling fast. I've attached an example where I scroll to 'Voluptates?' but it snaps to 'Facere.' 3) (nice to have): if the options are not all the same height, for example if options above and below the selected option are smaller, how does this affect the snapping functionality? i.e. if 'selected option' was 60px but prev-1 & next-1 are 90% of that, prev-2 & next-2 are 70%, and prev-3 and next-3 are 40% of 60px optionHeight. Here is my code example: https://stackblitz.com/edit/vitejs-vite-o4gumk?file=src%2FApp.vue gsap_scroll_to_option3.mp4

Hello, I'm trying to create a scroll picker in vue3 with ScrollTrigger. I have an array of options, and a highlight div that as the user scrolls, I want it to snap to the nearest option but also have the selected option snap directly in the center of the highlight div. I'm having difficulty with the consistency of the snapTo functionality in this case, as it doesn't always center in the highlight div. https://stackblitz.com/edit/vitejs-vite-uf2ygv?file=src%2FApp.vue