Как связать GSAP с WebGL и не нагружать React покадровыми обновлениями

В переходе между видео всю анимацию можно свести к числу от 0 до 1. GSAP меняет его по временной шкале, OGL передаёт значение в числовой параметр шейдера, а видеокарта по нему раскрывает блоки, искажает кадр и раздвигает цветовые каналы. Кривую движения можно заменить, не переписывая код шейдера.

Для перехода обновляются только две видеотекстуры: исходная и следующая. В эффекте под курсором автор оставил один контекст WebGL вместо нового для каждого заголовка и останавливает цикл отрисовки после 90 кадров без движения мыши.

Откройте разбор Тибо Гиньяна на Codrops, когда собираете сложную анимацию и хотите отделить её сценарий от шейдера, а покадровые изменения от состояния React.