[One scroll interaction with trackpads]

Hi, I am following this example to handle one scroll in my page. It works fine but when I scroll with trackpads on laptop, each scroll it move with 2 or 3 sections each time, I want each scroll with trackpads it's just scroll one section. Is anyway to fix this problem? Thanks you!

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

[Observer]

9 hours ago, GreenSock said:

Just to be clear, preventDefault is intentionally not documented because it's not supposed to be relied on in all situations to call preventDefault() on the event. It's mostly for internal use, not part of the public API. There are some edge cases where it doesn't call event.preventDefault() (and again, that is very intentional). And iOS has quite a few scroll-related bugs and you cannot consistently force it to prevent the address bar from showing/hiding. I've noticed that on iPhones, for example, it's almost impossible to prevent whereas on iPads you can prevent it (at least in most situations I've seen). Again, this has nothing to do with GSAP/Observer - it has to do with limitations and bugs in the browser itself. ScrollTrigger.normalizeScroll(true) is our best attempt and normalizing scroll behavior but it's not a silver bullet. 

See the Pen oNdNLxL?editors=1010 by GreenSock (@GreenSock) on CodePen

In this example, I use onPress in observer to prevent scrolling behavior on safari and it works fine but at this time I can't to interact with elements in DOM. Is anyway to resolve this problem? Thank you!

[ScrollTrigger with end trigger is an other element]

4 hours ago, GreenSock said:

I read that 5 times and I'm still completely lost, sorry. I don't understand what you're trying to do. child2 takes up the whole screen, so how could it be next to child1?  And what do you mean about overwriting? 

Sorry because I'm not explain clearly, I want to run animation in box1 with scrollTrigger but I have a problem when use pin with scrollTrigger, it's create pin spacer element to embrace box1 and you can see in box1 there are two elements child1 and child2 but child2 larger than it's parent. Is any way to pin spacer element also embrace child2 element?

[Observer]

Hi, I have a question about observer of gsap that is if I use preventDefault: true in observer this mean it will block address bar on mobile right? But when I use safari to test, I see the address bar not blocking and I don't know why while it works fine on android devices. Thank you!

[ScrollTrigger with end trigger is an other element]

56 minutes ago, GreenSock said:

I'm struggling to understand what you're trying to do there. child2 is position: absolute and is at the very top from the beginning, so why would you want to use that as an endTrigger? And right now, you've got "end" being a relative value (starts with "+=") which makes it relative to the start, thus the "endTrigger" wouldn't even matter. 

 

Maybe it'd help if you explained exactly what you wanted to happen and what isn't working right now. 

Because in my case, I want when end scrollTrigger animation of box1, box2 must be next to child2 but currently it is overwrite each other.

[ScrollTrigger with end trigger is an other element]

Hi, I have an issue with gsap scrollTrigger, I want trigger element is box1 and end trigger is child2 element, I also try with endTrigger property in scrollTrigger but it's not working. Is any solution for this problem. Thank you!

See the Pen YzREgQY by huynguyen235023 (@huynguyen235023) on CodePen

[Scroll with Observer]

14 hours ago, mvaneijgen said:

If you want to control what gets loaded on what screen size, check out GSAP matchMedia() https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

And here is a pen that disables the observer when some conditions are met and then goes over in normal scrolling behaviour. Hope it helps and happy tweening! 

 

 

 

 

But in my case, I can't disable observer because it's cause some problem. Is anyway to handle scroll on mobile with observer. Thanks!

[Scroll with Observer]

Hi, I follow this example to handle scroll to snap section in my website but I want on mobile it can scroll as normal in some section and also keep preventDefault: true to prevent scroll behavior of the browser. Is anyway to resolve this problem? Thank you!

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

[Problem with preventDefault of Observer on mobile]

Hi, I have a problem when using preventDefault: true with observer on mobile. In my website, I use preventDefault: true to handle snap section and in that section, I have a list of items and I want to drag this list items in horizontal but it's not working. Is anyway to fix this problem. Thanks!

[Animation with ScrollTrigger and ScrollToPlugin has some jerky]

1 hour ago, GSAP Helper said:

Have you tried this?: 

ScrollTrigger.normalizeScroll(true);

And/or this?: 

ScrollTrigger.config({ ignoreMobileResize: true });

 

Thanks for your response, I tried with normalizeScroll, it's work fine on mobile but when I scroll in footer section on desktop it has some jerky. So I think I will disable normalizeScroll on desktop and just enable it on mobile, how about this way or have you had a better solution? Thanks!

[Animation with ScrollTrigger and ScrollToPlugin has some jerky]

Hi, I want to use this example in my project, but when I scroll it on mobile, it's has some jerky. How can I fix it? Thanks!

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