Fullwidth draggable slider and mobile scroll issue.

[MaxFyxed]

Hi boys,
I'm using Gsap for almost a year and I love it.

i finished a new website, with my first draggable slider. 
The problem with the slider (is a fullscreen one), is that I can't scroll down in mobile.

You can try to scroll simulating a phone with the "Togle device toolbar" from Chrome dev tools.
Of course is possible with the mouse, but not dragging. Any idea?

Thanks a lot!!

https://dominiotemporal.com.ar/perifa/

My slider config (taken from an answer in this forum)

 

 var slideDelay = 6;

        var slideDuration = .3;

 

        var slides = document.querySelectorAll(".slide");

        var prevButton = document.querySelector("#home-slider-next");

        var nextButton = document.querySelector("#home-slider-prev");

        let slideButtonContainer = document.querySelector(".home-slider-nav");

 

        var numSlides = slides.length;

 

        for (var i = 0; i < numSlides; i++) {

            gsap.set(slides[i], {

                xPercent: i * 100

            });

        }

 

        var timer = gsap.delayedCall(slideDelay, autoPlay);

 

        var animation = gsap.to(slides, {

            duration: 1,

            xPercent: "+=" + (numSlides * 100),

            ease: "none",

            paused: true,

            repeat: -1,

            modifiers: {

                xPercent: gsap.utils.wrap(-100, (numSlides - 1) * 100)

            }

        });

 

        var proxy = document.createElement("div");

        gsap.set(proxy, { x: 0 });

        var slideAnimation = gsap.to({}, {duration: 0.1});

        var slideWidth = 0;

        var wrapWidth = 0;

        resize();

 

        var draggable = new Draggable(proxy, {

            trigger: ".slides-container",

            throwProps: true,

            onPress: updateDraggable,

            onDrag: updateProgress,

            onThrowUpdate: updateProgress,

            snap: {    

                x: gsap.utils.snap(slideWidth)

            }

        });

 

        window.addEventListener("resize", resize);

 

        prevButton.addEventListener("click", function() {

            animateSlides(1);

        });

 

        nextButton.addEventListener("click", function() {

            animateSlides(-1);

        });

 

        function updateDraggable() {

            timer.restart(true);

            slideAnimation.kill();

            this.update();

        }

 

        function animateSlides(direction) {

            timer.restart(true);

            slideAnimation.kill();

           

            var x = snapX(gsap.getProperty(proxy, "x") + direction * slideWidth);

           

            slideAnimation = gsap.to(proxy, {

                duration: slideDuration,

                x: x,

                onUpdate: updateProgress

            });  

        }

 

        function autoPlay() {  

            if (draggable.isPressed || draggable.isDragging || draggable.isThrowing) {

                timer.restart(true);

            } else {

                animateSlides(-1);

            }

        }

 

        function updateProgress() {  

            animation.progress(gsap.utils.wrap(0, 1, gsap.getProperty(proxy, "x") / wrapWidth));

        }

 

        function resize() {

            var norm = (gsap.getProperty(proxy, "x") / wrapWidth) || 0;

           

            slideWidth = slides[0].offsetWidth;

            wrapWidth = slideWidth * numSlides;

           

            gsap.set(proxy, {

                x: norm * wrapWidth

            });

           

            animateSlides(0);

            slideAnimation.progress(1);

        }

 

        function snapX(x) {

            return Math.round(x / slideWidth) * slideWidth;

        }

[GSAP Helper]

You'll significantly improve your chances of getting a solid answer if you provide a minimal demo like in CodePen. 

 

Are you saying that you've got a big full-screen Draggable element that can be dragged in any direction (vertical and horizontal) and you ALSO want to be able to touch-scroll on mobile devices? If so, that seems logically impossible to discern whether the person intends to drag the element or scroll the page. 

 

If you set the type of Draggable to "x" or "left", you could leverage the allowNativeTouchScrolling: true option to ensure that vertical swipes of the finger are interpreted as scroll ones. But it looks like in your demo you didn't set a type, so it's using the default of "x,y". 

 

If you still need some help, here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Or if you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

[MaxFyxed]

Oh, thats perfect, "type" was the feature I was looking.

Thanks you so much, is working now!