Веб-страница | frontend, backend, fullstack, react, vue, javascript, typescript, css, html
IT и технологии · 14 сентября 2026 г.
Как связать GSAP с WebGL и не нагружать React покадровыми обновлениями — 14 сентября 2026 г. в 05:12:06.005
Как связать GSAP с WebGL и не нагружать React покадровыми обновлениями В переходе между видео всю анимацию можно свести к числу от 0 до 1. GSAP меняет его по временной шкале, OGL передаёт значение в числовой параметр шейдера, а видеокарта по нему раскрывает блоки, искажает кадр и раздвигает цветовые каналы. Кривую движения можно заменить, не переписывая код шейдера. Для перехода обновляются только две видеотекстуры: исходная и следующая. В эффекте под курсором автор оставил один контекст WebGL вместо нового для каждого заголовка и останавливает цикл отрисовки после 90 кадров без движения мыши. Откройте разбор Тибо Гиньяна на Codrops, когда собираете сложную анимацию и хотите отделить её сценарий от шейдера, а покадровые изменения от состояния React.