PixeledCode

Oh. Sorry, I think I did a bad job on explaining. I was trying to do this https://gsap.com/community/forums/topic/37731-horizontal-scroll-on-trackpads/

oh this got closer to result. it's still triggering the function 2-3 times before `isTweening` state is changed. I cleaned it up a bit, created different handler https://codepen.io/PixeledCode/pen/JjzyjqQ?editors=0010

Yes that deltaX things is indeed weird. I only added it to showcase what issue I am facing. I only want the wheel to trigger when swiping on a trackpad from laptop

So I tried looking through docs but I couldn't find a way to detect when the wheel event ends when using Observer. Is it possible through GSAP or there needs to be a custom solution to detect when it ends? I only need the function to trigger when the scrolling ends, otherwise it will go to the end on a single wheel scroll. Thank You

Thank you for your detailed thoughts on this. Can you also recommend some more resources on 3d transformations?

Trying to create a 3d carousel thingy and this is one of the approaches which is kind of working. Except that setting rotationY is giving scroll. First it was both side scroll but setting overflow-x: clip fixes one side but drastically increases the other one. Also, the rotation is not looking natural. Bottom side of card is tilted but top is straight. Any help is appreciated

Thanks for replying. This sets in the right direction I think. I used Observer and dragEnd to remove a lot of code and rely on GSAP which was good. Although I am still not sure how to add the final touch of a carousel. I think it will need toLeft/toRight or dragStart and then checking how many pixels are moved. Ideally it should be more than 50% of the card width to trigger the move to next slide. and then there is also the snapping back to original position if drag is not eligible for move.

So I am creating a 3D carousel which goes to next slide on button click/mouse drag/arrow keys. I first tried to merge carousel libraries like splide and embla but couldnt get them to work properly. Now I have moved to custom solution which kind of works but lacks some features. https://svelte.dev/repl/e33b47c769bf49278094746a3af3c547?version=4.2.8 Is it possible to add dragging and snapping to axis using gsap? Unless user drags the slide till a certain number, it wont go to the next one and snap back to it's position, just like how normal carousel works.

Thanks for replying and sorry for not making it clear. Currently, the timeline is starting as soon as the page loads and is really glitchy on scroll for some reason. And I'll definitely look into FLIP plugin.

Hi, I am trying to achieve something like in the CodePen but on scroll. Currently I'm decreasing opacity, translating to top a bit and reducing height of parent. But Ideally, I need to remove the element so that parent can adjust height according so it's responsive. Any help is appreciated.

Thanks Cassie, that's exactly what I was looking for. I should definitely go through Carl's GSAP course again haha

Hi, I'm trying to create a scrolltrigger where I can only target the heading of before a paragraph. On each trigger, I am supposed to add class to some other element. but currently, since I am only targeting h3 tags, scrolltrigger ends just as soon as it starts, as you can see in demo. Since all the trigger belong to same id, I was hoping if there was some way to align end of each trigger just before the start of next one? Thank You

wow, so this worked! I tried searching docs for syncInterval but couldn't find anything. What exactly is it doing? Should I be using it in production? Thank You!!

yeah, it's really weird. I tried removing scrolltrigger and tried both scenarios: 1. Put the input inside a div and gave that div position: fixed. 2. Give position: fixed to input itself without any enclosing div. In both cases, input field worked on android. So I'm not sure position is messing with input anymore...

ah yes, I understand and I really appreciate what you guys are doing. And yes, if I remove the scrolltrigger from input field, I lose the pinning ability but then it works perfectly on android as well. So what I think is that there is some issue in android maybe and gsap scrolltrigger is triggering it?