How to add swipe up and down to ScrollTo

[madelyncruz]

I've recently implemented "Fullscreen slides with TweenLite, CSSPlugin and ScrollToPlugin"

It is working well except to mobile devices. I would like to add swipe up and down listener and debug it using my mobile device , but there is no log. Please help on how to make this work on mobile devices. Thank you.

 

See the Pen kDvmC by bassta (@bassta) on CodePen

$('target').on('swipe', function(event){ console.log(event); });

See the Pen kDvmC). by bassta (@bassta) on CodePen

[Carl]

Sorry, I'm not familiar with jQuery's swipe.

 

I suspect once you figure out the direction of the swipe you should be able to call the goToNextSlide() or goToPrevSlide() functions.

 

Our support is very focused on the GSAP API  so we would be much more suited to help you with the animation. Taking someone else's demo and making it mobile friendly with jQuery is a little beyond what we do. There might be someone here though that can help.

[OSUblake]

jQuery doesn't have a swipe event. That's for jQuery mobile. There are other libraries that can recognize gestures like a swipe, but Chrome just changed how touch is handled, and most of them haven't been fixed yet. 
 
For reference, here's a good article showing how to use the new pointerEvents.
https://developers.google.com/web/fundamentals/design-and-ui/input/touch/
 
Basic swipe detection isn't that hard. You could even use Draggable to handle most of it. I actually showed somebody how to do that using the same demo.
https://greensock.com/forums/topic/15370-draggable-choose-choose-only-move-to-down/?p=66819
 
And here's an isolated demo showing swipe detection.

See the Pen NdzWKw by osublake (@osublake) on CodePen

 
.

[madelyncruz]

Sorry, I'm not familiar with jQuery's swipe.

 

I suspect once you figure out the direction of the swipe you should be able to call the goToNextSlide() or goToPrevSlide() functions.

 

Our support is very focused on the GSAP API  so we would be much more suited to help you with the animation. Taking someone else's demo and making it mobile friendly with jQuery is a little beyond what we do. There might be someone here though that can help.

Yes. I just need to call the functions needed as soon as I figure out the swipe directions. Thank you so much for your assistance.

[madelyncruz]

jQuery doesn't have a swipe event. That's for jQuery mobile. There are other libraries that can recognize gestures like a swipe, but Chrome just changed how touch is handled, and most of them haven't been fixed yet. 

 

For reference, here's a good article showing how to use the new pointerEvents.

https://developers.google.com/web/fundamentals/design-and-ui/input/touch/

 

Basic swipe detection isn't that hard. You could even use Draggable to handle most of it. I actually showed somebody how to do that using the same demo.

https://greensock.com/forums/topic/15370-draggable-choose-choose-only-move-to-down/?p=66819

 

And here's an isolated demo showing swipe detection.

See the Pen NdzWKw by osublake (@osublake) on CodePen

 

.

I thought the "swipe" event is part of the jQuery as it logs a message when swiping using jQuery plugin except to the ones that are just animated using gsap. The draggable is what I'm looking for. Thank you so much for your help OSUblake