observer Observe touchscreen swipe

[dgpapagian]

Hello, I am using the GSAP Observer like this:

Observer.create({
                target: window,
                type: "wheel,touch",
                onUp: () => {
                    maskTimeline.reverse();
                },
                onDown: () => {
                    maskTimeline.play();
                },
                onChange: (self) => {
                    totalScroll += self.deltaY;
                    scrollPercentage = totalScroll / $(window).height();
                    if (scrollPercentage < 0) {
                        totalScroll = 0
                        scrollPercentage = 0;
                    }
                    else if (scrollPercentage > 1) {
                        totalScroll = $(window).height();
                        scrollPercentage = 1;
                    }
                }
            });

The issue is that I also want it to work when someone drags on a touchscreen monitor. I know I could also use type pointer but I want it to activate only when swipe/drag is detected

[Rodrigo]

Hi @dgpapagian and welcome to the GSAP Forums!

 

Is really hard for us to do much of anything without a demo. On top of that I don't have a touch monitor so I couldn't really tell you about that.

 

The only thing I can think of is to check the isTouch property the Observer Plugin has in order to check that in a conditional logic block in order to run your code or not:

https://gsap.com/docs/v3/Plugins/Observer/static.isTouch

 

Hopefully this helps.

Happy Tweening!