its2easyy

index.php это не главная, это запасная если подходящего шаблона в теме не нашлось.
А главная это front-page.php
https://developer.wordpress.org/files/2014/10/temp...
А чтобы страница из админки связалась с шаблоном главной, нужно в Settings - Reading выставить эту страницу в поле Homepage

там scrollTrigger из gsap + набор картинок, которые переключаются по прогрессу скроллтриггера. ScrollMagic лучше не использовать, он много лет не обновляется.
Как раз для такой анимации сделал библиотеку animate-images, как раз со scrollTrigger используется.
А у асуса PIXI.AnimatedSprite используется.

.project-details__container.project-details__container__loaded {}
.project-details__cover.project-details__cover_loaded {}

=>

.project-details{
  $this: &;
  &__container{
     &#{$this}__container__loaded{

    }
  &__cover{
       &#{$this}__cover_loaded{

       }
    }
  }

Но вообще тут что то не то со специфичностью, по нормальному это должно было бы быть как-то так

.project-details {
  &__container{
     &__loaded{
    }
  }
}

mask-image с картинкой в виде круга, который используется как маска для видимой части фоновой картинки, mask-size с нужным размером круга. На секции скрипт который слушает события mouseover, определяет положение курсора и это положение используется для задания mask-position. Плюс немного свойств чтобы это выглядело плавно, типа увеличения mask-size с нуля до нужного размера и плавное изменение mask-position через анимацию. mask-* свойства дополнительно с webkit префиксом чтобы работало везде.
Собственно можете прям у них с сайта все свойства вытащить и под себя переделать

Видео при частой перемотке назад будет тормозить, если вы его не сделаете с большим количеством ключевых кадров, но если сделаете, то оно будет весить намного больше. Так что лучше нарезать на картинки, но вместо png с прозрачностью стараться делать jpg и сжимать по максимуму, до начала появления артефактов. Это даст выигрыш в несколько раз по сравнению с png.
Ну и порекламлю свою библиотеку, которую для удобства таких анимаций делал, её как раз в основном с gsap scrolltrigger используем. https://github.com/its2easy/animate-images
Обычно 60-90 кадров на анимацию, с оптимизацией и постепенной предзагрузкой проблем со скоростью нет, если это не прям на первом экране страницы находится блок. Под мобилы можно отдельно нарендерить кадры меньшего размера или вообще заменить это на что-то более простое.

P.S. Если уже используется gsap, то для обновления состояния лучше вместо своих событий прокрутки использовать scrolltrigger и его колбеки

можете взять за основу и переделать под свой внешний вид
https://qna.habr.com/q/688307

" \"string\" "

Делал свою библиотеку для анимации кадров https://github.com/its2easy/animate-images. Чтобы привязать анимацию к скролу у меня на проектах был https://greensock.com/scrolltrigger/, но можно и с Intersection Observer.