QA Studio

Jitter — это визуальный редактор анимаций: ты настраиваешь движение ползунками, а на выходе получаешь параметры в виде набора данных. Для простых свойств, например, прозрачности и масштаба, они интуитивно понятны. Но для сложных траекторий Jitter генерирует специфическую структуру с контрольными точками кривых Bezier. Проблема в том, что эти координаты и типы сглаживания (easings) напрямую несовместимы с GSAP — нашей основной библиотекой для анимаций.

Какие были альтернативы (и почему они не подходили)

• Экспортировать как видео или Lottie. Тогда мы получили бы чёрный ящик — нередактируемый блок, в который невозможно динамически подставить имя или фото нового сотрудника.

• Упростить задачу и пустить карточки по прямой. Но нам хотелось в точности повторить задуманные дизайнером дуги.

• Подбирать координаты и кривые «на глаз» в коде. Это гарантированно превратилось бы в бесконечную рутину, где результат всё равно отличался бы от задумки.

Решение: написали небольшой адаптер

Чтобы не мучиться с ручным переносом и сохранить математическую точность, мы создали небольшую утилиту. Она берёт данные из Jitter, например, координаты Bezier-кривых и тайминги, и автоматически переводит их в формат, понятный GSAP.

Схема работы максимально простая:

JSON из Jitter → Утилита: парсинг кривой Bezier и расчёт длительности → Готовый конфиг для GSAP (координаты пути + длительность)

Что это дало

• Анимации получились с идеальными траекториями и таймингами.

• Карточки сотрудников — «живые» объекты. Мы можем в любой момент изменить имя и фото, сохранив сложную кривую движения.

• Если нужно поправить саму траекторию вылета, достаточно заменить старый конфиг на новый из Jitter. Адаптер сам подхватит данные и пересчитает параметры.

Удобно и масштабируемо.

Как мы уже сказали, клиент пришёл с чётким пониманием каждой мелочи: как поведёт себя блок при скролле, когда появится, как исчезнет. Без размытых формулировок типа «сделайте покрасивее».

Почему это облегчило работу:

• Мы не тратили время на согласование, не гадали, что клиенту понравится, а что нет.

• Сразу видели конечную цель.

• Наше чувство прекрасного совпало с видением клиента — нам нравилось делать то, что было нужно, и не хотелось доказывать, что другие решения будут лучше.

Почему это было вызовом

Когда клиент точно знает, чего хочет, выше ответственность, ошибиться нельзя. Но именно поэтому результат получился таким классным.

Отдельная фишка, родившаяся в процессе: в блоке с командой экспертов карточки должны были слегка смещаться при движении мыши, создавая эффект параллакса и живого интерфейса. Этого не было в ТЗ в явном виде, идея выросла во время обсуждения референсов. Мы реализовали фишку через отслеживание положения курсора и плавное изменение трансформации карточек. Теперь сайт не просто анимированный, а откликается на действия пользователя. Это создаёт эффект живого, отзывчивого интерфейса, делая взаимодействие более естественным и органичным. А ещё — повышает вовлечённость пользователей.

Даже с таким подготовленным клиентом в процессе появились доработки. Когда команда QA Studio начала тестировать живую версию, поняла, что кое-что можно поправить. Это нормально: даже когда знаешь, чего хочешь, всё равно не всегда представляешь, как все хотелки будут выглядеть в реальности.

Что добавили уже в процессе:

• Модальное окно с увеличенной картинкой. В блоке «Программа курса» есть аккордеон с разделами. Клиент посмотрел, как это выглядит на реальном устройстве, и понял: хочется нажать на картинку и рассмотреть её поближе. Мы оперативно добавили модалку.

• Тонкая настройка плавного скролла. Стандартные настройки библиотеки Lenis клиенту показались неидеальными. Вместо того чтобы гадать, мы сделали демостенд с панелью управления. Клиент сам двигал ползунки — скорость, инерцию, плавность — и в реальном времени видел результат. Так мы за пару часов нашли идеальные значения.

• Нюансы анимаций на мобилках. На десктопе всё летало красиво. На телефонах некоторые эффекты требовали адаптации — где-то замедлить, где-то вообще убрать, чтобы не перегружать устройство и сайт. Клиент тоже сам всё протестировал и вернулся с предложениями оптимизаций.

Самый нервный, но и самый классный момент. У клиента — своя команда тестировщиков. И они, конечно, проверяли нашу вёрстку почти под микроскопом.

Тестировщики смотрели сайт на всех мыслимых устройствах и системах: iPhone, Samsung, iPad, MacBook, Android, iOS и т. д. Досконально, педантично, с полной выкладкой багов в таблице.

Это дополнительно дисциплинировало. Хотелось сделать всё идеально, потому что баг на сайте школы тестировщиков — это репутационный риск. Но мы прошли это испытание.

Проект был сложный. Анимации здесь — не просто несколько слайдов для красоты, а целая экосистема с кучей взаимосвязей. Для таких проектов у нас есть уже выверенный и проверенный набор технологий.

Сборка — Astro

Наша стандартная и любимая сборка. Она быстрая, современная и даёт на выходе лёгкий статический сайт. Плюс клиент получил чистую структуру, в которой легко разобраться и поддерживать проект самим. Мы могли бы выбрать другой стек, но Astro даёт лучший перформанс из коробки.

Анимации — GSAP

Индустриальный стандарт и настоящий «швейцарский нож» для веб-анимации. Мы используем эту библиотеку почти на всех сложных проектах из-за её надёжности и гибкости. Уже базовые таймлайны позволяют выстраивать анимации не все сразу, а цепочкой: сначала вылетают карточки, потом появляется текст. Всё с точностью до миллисекунды.

Но именно здесь, за счёт плагинов, возможности библиотеки раскрылись на все сто.

• Взаимосвязанные анимации по скроллу (ScrollTrigger). Движение элементов синхронизировано с поведением пользователя: один блок закончил движение — запускается следующий. Связка GSAP и ScrollTrigger позволяет добиться плавности и не городить костыли.

• Движение по траектории (MotionPath). Карточки летят не по прямой, а по дугам, у каждой своя траектория. Без GSAP это было бы очень больно настраивать.

• Кастомное сглаживание (CustomEase). Чтобы в точности передать инерцию и «характер» движения из Jitter, мы перенесли кривые Bezier в GSAP через CustomEase. Это позволило сохранить дизайнерское ощущение от анимации, которое невозможно повторить стандартными функциями.

• Сложная типографика (SplitText). Использовали её для эффектного появления текста по строкам. Плагин разбивает текстовые блоки на отдельные строки, что позволяет анимировать их по очереди.

Lottie — для анимации текста

Там, где заголовки красиво «прорисовываются» по буквам, использовали Lottie. Это легковесный формат анимации из After Effects. Вес Lottie-анимации в разы меньше, чем видео, а выглядит не хуже. Дизайнеры клиента нарисовали анимацию в After Effects, экспортировали в JSON через плагин Bodymovin, а мы подключили этот файл на сайт. Всё плавно, красиво и без танцев с бубном.

Lenis — для плавного скролла

Библиотека, которая делает скролл на сайте шелковистым. Мы её донастроили под клиента через ту самую демку с ползунками. Важный нюанс: Lenis не конфликтует с GSAP, а работает с ним в связке, что было критично.

Команда QA Studio получила не просто сайт, который работает, а стек, который клиент сам сможет поддерживать и развивать. GSAP и Astro — это не экзотика, а индустриальные стандарты с отличной документацией. Любой новый разработчик сможет быстро разобраться в проекте и масштабировать его.

Клиент получил:

• Красивый, динамичный лендинг с анимациями, которые работают как часы даже под нагрузкой.

• Чистую, поддерживаемую сборку на Astro. И это важный момент: мы передали клиенту сборку, и сейчас он сам поддерживает сайт, может вносить правки, добавлять новые блоки, не обращаясь к нам за каждой мелочью.

• Кастомную настройку скролла под тактильные ощущения.