Здравствуйте.
Есть блок с видео, при нажатии на который открывается модалка с ютуб 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 