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 https://codepen.io/thenutz/pen/VwYeYEE 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!