Почему в GSAP 3 не работает opacity на мобильных устройствах?

Question

[Влад]

Столкнулся с проблемой, что в GSAP 3 не работает opacity на мобильных устройствах в сочетании с перемещением объекта, например y: -200. Объекты смещаются, но без плавной прозрачности.
Удивительное дело, что когда я вместо opacity: 0, использую свойство filter

.from(allOrganiser, {
    duration: 0.6,
    y: -200,
    filter: "opacity(0)",
    stagger: 0.2,
    ease: "power1.out"
  })

, то на мобильных устройствах и во всех браузерах на десктопе начинает работать, в то время как на Firefox отсутствует плавное смещение вниз и прозрачность. Элементы тупо резко появляются с указанной задержкой. Такие дела.
Есть ли универсальное решение?

Comments

[godsplane]

Попробуйте autoAlpha использовать а не opacity. А вообще этот вопрос лучшезадать на форуме gsap, у них там отличное комьюнити

[Влад]

godsplane, да, там все пишут про autoAlpha, но у меня почему-то со стэйджером это свойство работает некорректно. Firefox пришлось выделить отдельно.
Вот что я подобрал методом научного тыка:

import { gsap } from "gsap";

const books = document.querySelectorAll(".book");
const allOrganiser = document.getElementById("all-organiser");
const allCup = document.getElementById("all-cup");

const tl = gsap.timeline();

const propsBooks = {
  y: -100,
  stagger: 0.2,
  ease: "power0"
}
if (navigator.userAgent.includes('Firefox')) {
  propsBooks.opacity = 0;
} else {
  propsBooks.filter = "opacity(0)";
}

tl.from(books, propsBooks) // , "+=2"
  .from(allOrganiser, {
    duration: 0.6,
    x: -50,
    autoAlpha: 0,
    ease: "power1.out"
  })
  .from(
    allCup,
    {
      duration: 0.6,
      x: 200,
      autoAlpha: 0,
      ease: "power1.out"
    });

Посмотреть можно здесь.
Вроде симпатишно вышло :)