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;
}