angular, gsap.from ScrollTriger срабатывает через раз

Question

https://mihinov.github.io/ng-gsap-scroll/ - деплой проекта
https://github.com/mihinov/ng-gsap-scroll - код проекта

Пытаюсь разобраться, почему у меня не работает gsap.from
Иногда, я обновляю страницу внизу или даже обычно, с самого начала страницы
И у меня все блоки, которые gsap.from с scrollTriger'ом находятся в состоянии from и не анимируются в состояние изначального состояния

Я запускаю свои анимации в хуке ngAfterViewInit таким образом:

  ngAfterViewInit(): void {
    this.initAnimations();
    this.initScrollAnimations();
  }

Скорее всего, angular вызывает хук ngAfterViewInit до того, как angular проставил CSS, до того, как он рассчитал CSS-состояние для элементов. Я попробовал использовать setTimeout на 100 миллисекунд и у меня начало работать, но это всё-таки костыль. Скорее всего, для этого можно использовать какой-то отдельный хук, или получать элементы особым образом, чтобы получить их тогда, когда CSS будет готов

Answer 1

Мой придуманный костыль -

  ngAfterViewInit(): void {
    setTimeout(() => {
      this.initAnimations();
      this.initScrollAnimations();
    }, 100);
  }

Работает как швейцарские часы, жаль, что хука для этого нету. Если у вас есть мысли, как можно эту задачу лучше решить, напишите!

UPD: подумал, что можно слушать событие браузера load

ngAfterViewInit(): void {
    this.loading();

    fromEvent(window, 'load')
        .pipe(untilDestroyed(this))
        .subscribe(res => {

            this.loadingComplete();
            this.initAnimations();
            this.initScrollAnimations();
        });

}

БЛОГ НА HUSL

angular, gsap.from ScrollTriger срабатывает через раз

Ответы (1 шт):