Создание анимированного героя-отзыва с использованием временной шкалы GSAP и динамических данных CMS | Кодропс

Я хотел, чтобы этот раздел создавался вручную, чтобы его макет имел свой собственный характер, хотя каждая его часть создана веб-поток Данные КМС.

Он сочетает в себе счетчик в стиле игрового автомата, коллаж из портретов участников, составленный вручную, и циклическую анимацию, которая постоянно представляет новые лица. И портреты, и счетчик основаны на данных CMS, поэтому раздел со временем обновляется автоматически.

Самое интересное оказалось заставить все это работать вместе. Списки коллекций Webflow предназначены для повторения одного и того же макета для каждого элемента, в то время как в этом дизайне каждый портрет должен иметь свой собственный размер и положение.

Я хотел решить эту проблему, оставаясь, насколько это возможно, внутри Webflow Designer. В этой статье я расскажу о трех методах, которые сделали это возможным:

• настраиваемый счетчик игрового автомата
• коллаж, созданный вручную на базе CMS
• циклическая анимация GSAP, встроенная в визуальную временную шкалу Webflow

Технический стек

• веб-поток по планировке и структуре
• CMS веб-потока для данных элемента и значения счетчика
• CSS-контейнерные запросы + модули cqw и em масштабировать коллаж
• Небольшой помощник JavaScript для встречной анимации
• GSAP через визуальную временную шкалу Webflow для зацикленной анимации

Часть 1: Счетчик

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

Я сам не умею писать на JavaScript, поэтому для такой вещи я позволяю ИИ писать ее за меня, и мне действительно нравится работать таким образом. Несколько лет назад я бы поискал в Интернете какой-нибудь фрагмент и адаптировал его, где только мог. Теперь это быстро и именно так, как я хочу. Единственная сложность заключалась в смягчении. Я хотел, чтобы последние цифры в конце замедлялись и плавно устанавливались, чтобы это соответствовало спокойному ощущению всей страницы, а именно это ощущение требовало много движений вперед и назад. Поэтому я теперь отношусь к этим вещам по-другому: вместо того, чтобы описывать твики словами, я прошу ИИ построить мне небольшой конфигуратор. Несколько ползунков я могу настроить самостоятельно, пока плавность не станет нужной.

Эти настройки были моей обратной связью с ИИ: они точно рассказали ему, как генерировать JS. А поскольку подобные анимации подсчета мне нужны постоянно в клиентских проектах, я превратил их в бесплатный инструмент, который вы можете открыть и использовать самостоятельно: настроить его, экспортировать JS и установить один атрибут для текстового элемента, скрипт находит число автоматически. Генератор встречной анимации →

Как работает скрипт

Я могу прочитать код достаточно, чтобы понять его, но я не могу точно сказать, является ли он стандартным или есть что-то умное, чем стоит поделиться. Поэтому я попросил ИИ указать, что на самом деле делает этот сценарий интересным, чтобы я мог передать вам ключевые идеи. Вот короткая версия.

Основная идея: не считай, скользи. Вместо анимации значения от 0 до целевого значения скрипт строит вертикальную полосу цифр для каждого места в числе:

• каждая цифра находится в ячейке с overflow: hiddenровно в одну строку высотой
• внутри ячейки находится полоска сложенных друг на друга чисел (0, 1, 2… 9, 0, 1…), столько, сколько цифра должна вращаться, с целевой цифрой в самом конце
• полоска скользит вверх с transform: translateYа поскольку ячейка обрезает все, кроме одной цифры, вы видите, как числа пролетают мимо, пока цель не достигнет цели.

Никакой логики подсчета, просто обрезанная движущаяся полоска:

const e = 1 - Math.pow(1 - p, easePow); // ease-out: the part that took the most tuning
c.strip.style.transform =
  'translateY(' + -(e * c.steps * dh.unit) + dh.css + ')';

Три меньшие детали — это то, что на самом деле сделало это ощущение правильным:

Считайте обороты справа, а не разбрасывая по всему числу. Я хотел, чтобы левая цифра фиксировалась первой, а правая вращалась дольше всего. Если вы распределите вращения по всему числу, скачок с 952 на 1000 будет пересортирован в каждом месте, и ощущение изменится. При счете справа единица всегда ведет себя одинаково, независимо от длины числа:

const right = chars.slice(idx + 1).filter((c) => /\d/.test(c)).length;
const dist  = total - 1 - right;
const f     = dist / maxDist;
const revs  = Math.max(1, Math.round(revLeft + (revRight - revLeft) * f));

Отделите «сколько вращений» от «сколько времени это займет». Чистое расслабление начинается на полной скорости, что кажется беспокойным. Разделение этих двух параметров (оборотов и продолжительности) — это то, что дает реальный контроль над ощущением, и именно на пару ползунков я потратил больше всего времени:

const steps = revs * 10 + final;                                    // how far the digit travels
const myDur = Math.max(0.3, durRight - (maxDist - dist) * stagger); // how long it takes

Прочитайте реальную высоту строки, не кодируйте жестко 1em. Мой заголовок использует плотный line-height: 0.9так что 1em ячейка будет слишком высокой и нарушит расстояние ниже. Скрипт считывает фактическую высоту строки с помощью getComputedStyle и перемещает полосу в той же единице:

const cs = getComputedStyle(el);
const lh = cs.lineHeight;
const px = lh === 'normal' ? parseFloat(cs.fontSize) * 1.2 : parseFloat(lh);

И, наконец, привязка CMS: крошечный второй скрипт в нижнем колонтитуле считывает реальное число и предоставляет его глобально. Счетчик ожидает этого сигнала и IntersectionObserver чтобы подтвердить, что он виден, чтобы он запускался ровно один раз с реальным номером в нужный момент, что вы видите в предварительном просмотре выше.

Часть 2. Индивидуальная сетка коллажей Webflow CMS

Целевой макет

Эта часть, по мнению большинства людей, работает только с пользовательским кодом или каким-либо обходным решением, и ее решение оказалось небольшой забавной задачей.

Вот здесь-то и мешает Webflow. У меня есть четыре портрета четырех разных размеров, составленные как коллаж, но они взяты из списка коллекции CMS. Обычно, если вам нужна сетка, упорядоченная вручную, вы помещаете элементы в сетку CSS и присваиваете каждому свой размер и положение. Это прекрасно работает, но только вне списка коллекций. Список коллекций Webflow CMS в настоящее время не позволяет устанавливать элементы на отдельные позиции.

По умолчанию Webflow просто выводит каждый элемент одинаково: тот же размер, тот же порядок, тот же повторяющийся текст внизу. Но дизайн требует, чтобы каждый портрет имел свой размер и положение, и в этом проблема.

Ключевым моментом стало то, что мне вообще не нужно менять порядок элементов, мне просто нужно стиль каждой позиции. В простом CSS вы можете ориентироваться практически на любой элемент, который захотите, что действительно полезно. Webflow предоставляет вам только четыре из этих опций непосредственно в раскрывающемся списке «Конструктор»:

• первый ребенок
• последний ребенок
• странные предметы
• даже предметы

Я хотел посмотреть, как далеко я смогу продвинуться, используя только эти четыре, без написания специального CSS. Этого оказалось достаточно.

Таким образом, каждая позиция получает свою собственную ширину плюс вертикальный сдвиг на двух из них, чтобы плитки не располагались в прямом ряду:

/* base width for every item, then override per position, all in em */
.user_grid-item { width: 10em; }
.user_grid-item:first-child { width: 5em; margin-top: 10em; }
.user_grid-item:nth-child(even) { width: 8em; margin-top: 10em; }
.user_grid-item:last-child { width: 6em; }

Возможно, вы ранее заметили в выводе по умолчанию, что Webflow добавляет то же имя и метку роли в каждый элемент, поскольку CMS повторяет контент для каждого из них. С этим справляются те же дочерние селекторы: с помощью небольшой вставки CSS я по умолчанию скрываю все метки и показываю только одну для каждого коллажа: метку третьего элемента в верхнем коллаже и метку второго элемента в нижнем.

.user_grid-item-name { display: none; }
.user_grid-list .w-dyn-item:nth-child(3) .user_grid-item-name { display: block; }

Работа с единицами em для масштабирования макета

Многие люди, которые следят за моими уроками, замечают, что я работаю с em здесь и там, но еще не внедрили это в свой рабочий процесс. Этот макет — отличный пример того, почему оно того стоит.

Принцип: если вы храните каждое значение внутри user_grid-wrapper в emвы можете масштабировать весь макет вверх или вниз, используя только размер шрифта оболочки. Размер каждого элемента изменяется вместе с ним, никакой дополнительной работы.

Вот как это настроено:

• обертка получает container-type: inline-sizeкоторое вы добавляете в качестве настраиваемого свойства в Webflow, поскольку его нет на панели стилей, из которого можно выбрать. Это делает собственную ширину оболочки эталоном для em ценности внутри него
• его font-size установлено на 1cqwодин процент этой ширины
• потому что em относительно размера шрифта, 1em теперь равен одному проценту ширины оболочки, поэтому элемент размером 10em составляет 10% от нее, элемент размером 5em – 5% и т. д.
• тот user_grid-wrapper сам находится внутри контейнера моей страницы, который имеет максимальную ширину

.user_grid-wrapper {
  container-type: inline-size;
  font-size: 1cqw; /* 1% of the container width */
}
/* items in em then scale with the container automatically */
.user_grid-item { width: 10em; } /* = 10% of the container width */

Все четыре элемента коллекции CMS пропорционально масштабируются вместе с формой градиента позади них, а это именно то, что вам нужно для такого изображения. Измените базовый размер шрифта, и весь коллаж увеличится или уменьшится как единое целое.

Это делает изменение размера макета, особенно с точки зрения отзывчивости, невероятно простым и быстрым. В точке останова для мобильных устройств и планшетов я меняю местами cqw база для vwи поскольку контейнер страницы уже имеет полную ширину, один vw ведет себя как один cqw. Я установил коллаж на 2vw так что он сразу стал больше, и макет по-прежнему работал хорошо.

Часть 3. Циклическая анимация GSAP, встроенная в временную шкалу Webflow.

Для этой анимации я использовал новую визуальную временную шкалу Webflow. Он позволяет создавать настоящие анимации GSAP прямо в дизайнере, без написания кода GSAP самостоятельно.

Прежде чем что-либо анимировать, я думаю о том, в каком порядке все должно быть. Это раздел в середине страницы, поэтому анимации нужна начальная искра, чтобы привлечь внимание посетителя, но это также не должно происходить сразу, потому что в макете много мелких деталей, и большинство из них теряются, если все движется одновременно. Таким образом, счетчик сначала раскручивается, а по мере его замедления следует и остальное. Большая часть работы заключалась в поиске оптимального момента во времени: как долго работает счетчик и когда элементы коллажа начинают меняться, чтобы паузы не казались слишком длинными, а анимация удерживала внимание зрителя. Все элементы в этом разделе появляются слегка в шахматном порядке.

Градиенты формы маски также немного масштабируются, что придает им дополнительное движение.

Стоит сделать одну вещь: я воспроизвожу временную шкалу при входе, делаю паузу при выходе и возобновляю при прокрутке назад, чтобы она не работала все время в фоновом режиме и не влияла на производительность.

Эффект 3D-члена цикла

Цикл участников — это действительно изюминка всей анимации. Поскольку раздел со временем пополняется новыми участниками, я хотел, чтобы лица менялись местами, а не появлялись один раз. И поскольку они меняются местами, мне нужна была анимация в обоих направлениях: одна для ввода набора, другая для его отправки, что особенно хорошо смотрится на тексте, когда он выдвигается обратно. Настройка проста: каждый список коллекций помещается в раздел дважды, а второй размещается position: absolute прямо над первым. Он пропускает коллекцию вперед (пропускает четыре, пропускает восемь), поэтому отображаются разные лица, а затем один список анимируется, а другой анимируется.

Деталь, которая придает ему премиальный вид, — это 3D-эффект. Равнина rotateX Сама по себе выглядит плоской: карта просто наклоняется, но настоящей глубины в ней нет. Исправление — это перспектива, и удобная часть заключается в том, что вы можете установить перспектива и происхождение непосредственно в пользовательском интерфейсе этапов действия GSAPбез предварительной настройки 3D-преобразования в Webflow Designer.

Настройки, которые я использовал для входящих изображений:

• Повернуть X: от -90° до 0°, настоящий 3D-переворот.
• Да: от 50% до 0%, поэтому они перемещаются вверх на свое место.
• Шкала: от 0,7 до 1, вырастает до полного размера
• Непрозрачность: от 0 до 100, постепенное появление
• Перспектива: 1000, что дает реальную глубину вращения.
• шататься: смещение 0,08 с, начиная с пункта 4.
• Простота: Эластичный (Out), для отскока.

Легкость здесь является важной частью характера. Я хотел немного отскочить в конце, такое пружинящее движение, которое часто можно увидеть в пользовательском интерфейсе iOS от Apple. Это придает обмену игривый оттенок и хорошо сочетается со спокойными градиентами, которые плавно исчезают. Я планирую повторно использовать это на странице, и этот раздел стал хорошим местом, чтобы увидеть, как это работает. Преимущество временной шкалы GSAP в Webflow заключается в том, что вы выбираете кривую визуально с помощью встроенного…