[ScrollTrigger.normalizeScroll({allowNestedScroll: true}) with scrollable div]

On 10/29/2022 at 12:53 AM, GreenSock said:

Thanks for sharing your solution, @Chipsa. Here's a slightly more condensed and memory-efficient version: 

let stopPropagation = e => e.stopImmediatePropagation();
document.querySelectorAll("div").forEach(el => {
	if (el.scrollHeight > el.clientHeight) {
		el.addEventListener("wheel", stopPropagation);
		el.addEventListener("touchstart", stopPropagation);
	}
});

 

Thank you so much, memory so important on this project🙂

[ScrollTrigger.normalizeScroll({allowNestedScroll: true}) with scrollable div]

On 6/23/2022 at 2:06 PM, GreenSock said:

You can capture the events on the scrollable containers and stopImmediatePropagation(), like: 

document.querySelectorAll("div").forEach(div => {
  if (div.scrollHeight > div.clientHeight) {
    div.addEventListener("wheel", e => e.stopImmediatePropagation())
  }
})

Does that help? 

Hello, I'm used it, and it works on desctop, but on mobile, my popups not scrolling, can you give an advice how I can fix it? I'm already have this part of code, but it doesn't help

 

Edit my code, for mobile touchstart event is ok, but I have dynamic content in popup, and didnt update listener, so wheel + touchstart resolve problems

ScrollTrigger.normalizeScroll({
        allowNestedScroll: true,
});

document.querySelectorAll('.lit-popup-container').forEach((div) => {
        if (div.scrollHeight > div.clientHeight) {
            div.addEventListener('wheel', (e) => {
                e.stopImmediatePropagation();
            });
            div.addEventListener('touchstart', (e) => {
                e.stopImmediatePropagation();
            });
        }
    });

 

[Work with scrollTrigger and page reload, anchor links]

4 minutes ago, _Greg _ said:

Hi @Chipsa!

Please create a minimal demo on codepen  its hard to answer without any code.

Don't sure which part of my code can be minimal demo, just abstract example where I need to trigger all triggers before current scroll position and fire all callbacks it's not enough?

[Work with scrollTrigger and page reload, anchor links]

Hello there, I have some problem with chain of triggers, for example I have callback on Y position 1000, and trigger that depends from first trigger on Y 2000, if page loaded on Y 1500, second trigger doesn't fire, I understand why this happened, but can I fire all triggers from Y 0 to position where document loaded? Sometimes if scroll going to fast triggers doesn't fire at all, specially if I use anchor links, is it real, or I have broken something else?

[DrawSVG and ScrollTrigger fire to many events with magic mouse and touch devices]

4 hours ago, GreenSock said:

I don't see any difference either, and I'm using a magic mouse. It's normal for the drawSVG version to be very slightly less performant than a basic strokeDashoffset tween because DrawSVG does a bunch of things to protect you from browser bugs. And you're not using vector-effect="non-scaling-stroke" on any SVG that's doing the draw effect, right? That can hurt performance as well. 

Okay, I add non-scaling stroke and win some FPS, for now code is bad, I can optimize it and win more FPS, the question was about throttle some calculation, but yes, DrawSVG really save me from some bugs and it's logical to lose some fps for it, thank you! 

[DrawSVG and ScrollTrigger fire to many events with magic mouse and touch devices]

19 minutes ago, elegantseagulls said:

I think that this has more to do with the rendering performance of animating stroke-dasharray than it does with ScrollTrigger or GSAP, which are tuned to use rAF, I believe. It could also be something with you setup too... A minimal CodePen could help. Your Demo actually seems to run pretty smooth on my machine: I only got it to dip to 43FPS, but that was where you were animating a full-screen mask (also need repainting and can't be hardware accelerated).

 

For animating things like stroke-dasharray or full-screen masks, you may have to start looking at WebGL or other approaches to get the same effect to get max FPS performance.

For get lower FPS you need magic mouse or touch device, I already did this with stroke-dasharray(not DrawSVG) and FPS was much higher.

Example of stroke-dasharray animation 

See the Pen RwpQMYK by baranovroman (@baranovroman) on CodePen

Example with DrawSVG - 

See the Pen LYWqbRJ by baranovroman (@baranovroman) on CodePen

[DrawSVG and ScrollTrigger fire to many events with magic mouse and touch devices]

I have big SVG (like 200vw 200vh) and fake-horizontal scroll section, at first time i realize svg drawing with simple change stroke-dasharray onUpdate, but I have some blinks and other artifacts, but good performance, now I add DrawSVG for line and magic mouse and touch devices fires too many events, drawing happens too often and fps drops to 12, can I throttle this or something?

code is too simple, timeline and fromTo with DrawSVG 0%-100%, for example of fps drop - https://frontend.chipsa.ru/mediadesk/public/html/

if need I can add simple demo, but I'm sure problem with firing too many events.

 

And how I can update all ScrollTriggers to actual scroll? I have some callback animations, and some relative triggers, if page reload and position not (0, 0) my animations on scroll doesn't play and user didn't see some of decoration, it's 100% logical, but how I can trigger this? Also if you click on anchor link(temporary removed) and animations have callback animations that not scrubed and have duration but haven't enough time some things look broken, maybe you have some recipes to dodge this?