Horizontal scrolling with GSAP and ScrollMagic on tablets

[false_hero]

Hi! Not sure if this is the best place to ask help regarding this, but this forum was very helpful to get me started with gsap and scrollmagic.

 

I'm currently working on a horizontal scrolling website with ScrollMagic and GSAP. I've stumbled upon several examples and it's working well on desktops with mousewheel function. However, when it comes to tablets where mousewheel is not applicable, the anchor navigations don't work and the results when using Chrome and Safari varies (anchor links not working on ipad chrome but works well on ipad safari). I added a drag function which is helpful for tablets, but it staggers and the animation is not very smooth.

 

Below is the mousewheel function I used:

 

document.addEventListener('wheel', function(e){
    if(e.type != 'wheel'){
        return;
    }
    let delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 1) || 1;
    document.documentElement.scrollLeft += delta;
    document.body.scrollLeft += delta;
});

 

And here is the drag function where I based from 

See the Pen VwYeYEE by thenutz (@thenutz) on CodePen.

 

const slider = document.querySelector('html');
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', (e) => {
    isDown = true;
    slider.classList.add('active');
    startX = e.pageX - slider.offsetLeft;
    scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
    isDown = false;
    slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
    isDown = false;
    slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
    if(!isDown) return;
    e.preventDefault();
    const x = e.pageX - slider.offsetLeft;
    const walk = (x - startX) * 3;
    slider.scrollLeft = scrollLeft - walk;
    //console.log(walk);
});

Unfortunately, with recent ipad update, it seems not possible to detect if the user is using an ipad or ipad pro.

Is there something wrong with the code or possibly css that can fix this? Appreciate any help!

See the Pen JjEyjgb by shirasaki (@shirasaki) on CodePen.

[PointC]

Hi @false_hero

 

ScrollMagic is not a GreenSock product and not supported here. Have you seen GreenSock's ScrollTrigger plugin?

If you have specific GSAP related questions or problems, we're happy to help, but we don't have the resources to assist with 3rd party plugins and general logic issues.

 

Let us know if you have a GSAP question and best of luck with your project.

 

Happy tweening.