gsap Smooth Scroll Parallax

[Sukru 6 Likes (Newbie)]

Hello, I actually want to stop the scroll and parallax effects that are not normal effects on mobile devices. I used a code for this, but smoothscroll still works. can you help me?
 

You can view the project here, thank you very much.

http://clients.super-agency.com/test/dy/

 

I'm using the code below, it turns off the parallax, but the smooth scroll effect still works. I want browser default scrolll on mobile devices.

 

console.clear();

gsap.registerPlugin(ScrollTrigger, ScrollSmoother, SplitText);

 

let smoother = ScrollSmoother.create({

wrapper: "#smoother-wrapper",

content: "#smoother-content",

smooth: 1,

smoothTouch: 0.1,

normalizeScroll: true,

ignoreMobileResize: true,

effects: ScrollTrigger.isTouch === 1 ? false : true,

});

See the Pen bGKpNrJ by sukruemanet (@sukruemanet) on CodePen

[Cassie 5,069 Likes (Superhero)]

Hey there!

 

smoothTouch adds smooth scroll behaviour on touch devices (like mobile),

normalizeScroll intercepts native scroll behaviour and handles it on the JavaScript thread - this isn't necessary unless you're struggling with specific bugs.

 

If you want normal behaviour on mobile you can remove both of those options.

 

ScrollSmoother.create({
  wrapper: "#smoother-wrapper",
  content: "#smoother-content",
  smooth: 1,
  ignoreMobileResize: true,
  effects: ScrollTrigger.isTouch === 1 ? false : true,
});

 

This option is only setting this up on page load though, I would probably set it up differently to allow for users resizing their screens or plugging in different navigational hardware.

Maybe something like this using GSAP's matchMedia... 

https://cdpn.io/pen/debug/LYrNVra - link for testing

 

See the Pen LYrNVra?editors=0110 by GreenSock (@GreenSock) on CodePen

That's only creating a ScrollSmoother instance on non-touch devices wider than 800px, and removing the smoother added wrapper div on small touch devices too.

 

 

[Sukru 6 Likes (Newbie)]

2 hours ago, Cassie said:

Hey there!

 

smoothTouch adds smooth scroll behaviour on touch devices (like mobile),

normalizeScroll intercepts native scroll behaviour and handles it on the JavaScript thread - this isn't necessary unless you're struggling with specific bugs.

 

If you want normal behaviour on mobile you can remove both of those options.

 

ScrollSmoother.create({
  wrapper: "#smoother-wrapper",
  content: "#smoother-content",
  smooth: 1,
  ignoreMobileResize: true,
  effects: ScrollTrigger.isTouch === 1 ? false : true,
});

 

This option is only setting this up on page load though, I would probably set it up differently to allow for users resizing their screens or plugging in different navigational hardware.

Maybe something like this using GSAP's matchMedia... 

https://cdpn.io/pen/debug/LYrNVra - link for testing

 

 

 

That's only creating a ScrollSmoother instance on non-touch devices wider than 800px, and removing the smoother added wrapper div on small touch devices too.

 

 

 

 

Thank you very much