Как сделать последовательные анимации с requestAnimationFrame?

Здравствуйте.
Есть блок с видео, при нажатии на который открывается модалка с ютуб iframe.
Я пытаюсь анимировать открытие модалки.

Вот как все должно произойти:
1) сначала блок с видео затемняется. Это делается путем активации модалки (ставлю visibility visible), далее я обрезаю модалку с помощью clip-path: inset(некоторые значения) и плавно показываю квадратик над видео меняя opacity с 0 до 1 (у модалки темный цвет фона).

2) затем затемненная и обрезанная модалка должна расшириться на весь экран. Для этого я меняю clip-path inset до нулевых значений.

3) модалка расширилась и плавно показывается контент модалки (iframe) через opacity

У меня получилось реализовать это через GSAP (криво, но описанный эффект получается).
Я пытаюсь переписать это все на чистый JS. Вроде, все необходимые знания имеются, но не знаю как все правильно организовать в коде. Как мне последовательно выполнить эти 3 этапа, из которых состоит вся анимация?
Засовывать все в один коллбэк requestAnimationFrame и отслеживать окончание каждого этапа или же создать 3 отдельных коллбэка и как-то их последовательно вызывать? Вроде же пишут, что лучше все в одном requestAnimationFrame делать из-за производительности? Но я что-то попробовал так и получается слишком сложно. В общем, я запутался. И как-то еще нужно все это в обратную сторону делать. Вообще, стоит ли забить и оставить GSAP?

Вот пример: https://codepen.io/h3ckphy/pen/XWaXeKv
  • Вопрос задан
  • 73 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы