GSAP как запретить следующий триггер пока анимация предыдущего не закончится?

Question

[imko]

Песочница
При прокрутке страницы если верх следующей секции находится уже на 75% от верха страницы страница должна автоматически докручиваться до нее (как scrollIntoView(true))
Такая реализация работает но если одновременно несколько секций попадают в экран то происходит прокрутка до обеих по очереди, нужно или запретить следующему триггеру срабатывать пока не выполнится предыдущая анимация, ну либо как-то реализовать такое поведение другим образом, есть идеи?)

Answer 1

[VoidVolker]

Использовать флаг: перед стартом анимации проверять флаг, если разрешает анимацию - переключать флаг и запускать анимацию, в конце анимации флаг переключать обратно, если флаг запрещает анимацию - не запускать анимацию.

Comments

[imko]

Оно само не умеет? А у анимации поля нету под флаг, просто куда то на старт вешаться и отменять?

[VoidVolker]

imko,

Оно само не умеет?

Чтобы "оно само умело" - надо написать соответствующий код, реализующий требуемую логику.

А у анимации поля нету под флаг, просто куда то на старт вешаться и отменять?

Смотрите документацию на код применяемой вами анимации.

[imko]

VoidVolker,

надо написать соответствующий код, реализующий требуемую логику.

если б я хотел сам логику реализовывать а не просто конфиги строчить тогда бы и gsap не требовался) в том ведь и идея чтобы уже готовым пользоваться

[VoidVolker]

imko, дык если в gsap нету нужной вам логику - то либо вам её и надо реализовывать самостоятельно либо искать другое решение. Кроме того, в вашем случае ваша задача решается всего лишь одним флагом и проверкой условия - это пара строчек кода, плюс-минус.

[imko]

VoidVolker, решалось на самом деле еще проще, пока сидел перечитывал доки, допер что достаточно просто IntersectionObserver сделать в котором для первой isIntersecting секции пинать gsap.to, он дальше сам разберется)

[imko]

VoidVolker, ну либо чуть сложнее, если их дофига влезает в страницу, запоминая индекс текущей и скролля до следующей и меняя его только по завершению этой анимации