Using gsap triggers persistent updates to the data-overlayscrollbars-viewport attribute on the HTML element

[PolinaTcaciuc]

Describe the bug Using gsap triggers persistent updates to the data-overlayscrollbars-viewport attribute on the HTML element, potentially impacting performance.

To Reproduce Steps to reproduce the behavior:

1. Open the code in a browser window.
2. Launch developer tools.
3. Observe the data-overlayscrollbars-viewport attribute on the HTML element undergoing continuous updates.

Expected behavior The data-overlayscrollbars-viewport attribute on the HTML element should not update incessantly.

Examples Please create a small example of the bug. https://codesandbox.io/p/devbox/overlayscrollbars-gsap-q6h336?file=%2Fapp.vue%3A43%2C22

Environment

• Used Operating System(s): Windows 11
• Used Browser(s) (with version): Google Chrome 125.0.6422.61 64bit

Additional context None

[KingSora]

Good day @PolinaTcaciuc :)

Per default OverlayScrollbars updates as soon as a child changes in a certain way. If you want to optimize this behavior you can use the update.ignoreMutation option for this.

To optimize your example I've used the option like this:

update: {
  ignoreMutation(mutation) {
    const { target } = mutation;
    if (target instanceof HTMLElement) {
      if (target.classList.contains("marquee-list__item")) {
        return true;
      }
    }
  },
}

You can find a demo here: https://codesandbox.io/p/devbox/overlayscrollbars-gsap-forked-9ql7w4?file=%2Fapp.vue%3A16%2C7

For your usecase you can obviously use any condition to optimize animations, you could e.g. ignore every update to css properties like transform to make something more generic. Just be aware that the ignoreMutation function can run very often depending on what is happening in the DOM. So keep an eye on your checks, they should be somewhat performant.

[PolinaTcaciuc]

Добрый день@PolinaTcaciuc:)

По умолчанию OverlayScrollbarsобновляется, как только дочерний элемент изменяется определенным образом. Если вы хотите оптимизировать это поведение, вы можете использовать update.ignoreMutationэту опцию.

Чтобы оптимизировать ваш пример, я использовал такой вариант:

update: {
  ignoreMutation(mutation) {
    const { target } = mutation;
    if (target instanceof HTMLElement) {
      if (target.classList.contains("marquee-list__item")) {
        return true;
      }
    }
  },
}

Вы можете найти демо здесь: https://codesandbox.io/p/devbox/overlayscrollbars-gsap-forked-9ql7w4?file=%2Fapp.vue%3A16%2C7

В вашем случае вы, очевидно, можете использовать любое условие для оптимизации анимации, например, вы можете игнорировать каждое обновление свойств CSS, transformчтобы сделать что-то более общее. Просто имейте в виду, что ignoreMutationфункция может запускаться очень часто в зависимости от того, что происходит в DOM. Так что следите за своими чеками, они должны быть в некоторой степени производительными.

Hi, thanks a lot, you save me! :)

[KingSora]

Glad I could help :)