Этот эффект наведения кажется невозможным — GSAP × Canvas 👀

Большинство сайтов имитируют это с помощью CSS-масок. На самом деле, это одно число на квадрат, анимированное в случайном порядке — и всё это умещается в 100 строк. Я разобрал сайт агентства Framer, чтобы выяснить, как на самом деле работает их эффект раскрытия пикселей, а затем перестроил его с нуля с помощью GSAP и API Canvas. Никаких библиотек, кроме GSAP. Никаких шейдеров. Никаких зависимостей. В конце вы поймете: → Почему видео никогда не отображается на странице и почему существует ДВА холста → 9-аргументный метод drawImage, который никто толком не объясняет → Как «случайное» смещение в GSAP заменяет 20 строк кода перемешивания → Исправление размытия на Retina-дисплеях с помощью devicePixelRatio + setTransform → object-fit: cover, написанный вручную (у холста его нет) → quickTo для следования курсора, который не снижает частоту кадров Секрет, который заставляет всё понять: GSAP анимирует не только элементы DOM. Он анимирует любое число на любом объекте JavaScript. В этом весь эффект. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔗 Живая демоверсия https://dimaac.com/projects/pixel-canvas 💻 Исходный код (бесплатно, MIT) https://github.com/Hank-D-Tank/pixel-... ✨ Оригинал ВДОХНОВЕНИЕ https://loop-agency.framer.website/ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🛠 СТЕК GSAP 3.12 · Canvas 2D API · Чистый JavaScript · Отсутствие этапов сборки Опубликуйте свою версию в комментариях — мне интересно посмотреть, что вы в неё вставили. #gsap #creativecoding #webdev #javascript #canvas #frontend #awwwards #webdesign #uianimation #framer