Веб-страница | frontend, backend, fullstack, react, vue, javascript, typescript, css, html
IT и технологии · 13 сентября 2026 г.
Как воссоздать пиксельную анимацию маскота Claude на SVG и GSAP — 13 сентября 2026 г. в 19:18:46.701
Как воссоздать пиксельную анимацию маскота Claude на SVG и GSAP Автор замедлил ролики до 30% скорости, сделал скриншоты каждого кадра и примерно за четыре дня собрал четыре анимации. Персонаж состоит только из SVG-прямоугольников, без видео, GIF и контуров. React связывает компоненты с элементами, а GSAP задаёт движение и смену кадров. Для ходьбы автор синхронизировал глаза, корпус и ноги в одной временной шкале, а clipPath обрезал ноги по линии пола при наклоне. Флаг пришлось нарисовать в 12 вариантах и переключать покадрово: между пиксельными формами нет плавного перехода. Откройте разбор Codrops с кодом и примерами перед анимацией пиксельного персонажа: сначала определите, какие части анимировать плавно, а какие рисовать кадр за кадром.