Эффекты карточек в Tilda: как выбрать один из 13 вариантов GSAP

Хочется оживить карточки, но пока непонятно чем: лёгким подъёмом, магнитным движением или реакцией фотографии. Удобнее сначала сравнить варианты на одном содержимом, чем ставить несколько разных кодов подряд.

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

Начните с вопроса, что должно замечаться при наведении. Лёгкий подъём выделяет саму карточку. Зум обращает внимание на фотографию. Магнит, наклон или подсветка добавляют реакцию на положение курсора. Более выразительные варианты — переворот, шторка, глитч, голограмма, неон и дешифровка заголовка.

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

В разделе «Где применять» выберите нужные блоки. Затем добавьте карточки из каталога или укажите CSS-селекторы по одному в строке. Общий .js-product без ограничения может охватить карточки товаров на всей странице.

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

Зум и глитч требуют подходящего изображения внутри карточки. Дешифровке нужен текстовый элемент. Если внутри несколько фото или заголовков, проверьте, что найден именно нужный. Для дешифровки используйте простой текст: вложенное HTML-оформление не рассчитано на замену случайными символами.

Тексты оборотной стороны и шторки общие для выбранного набора. Это не автоматическая подстановка уникального описания каждого товара. Формулировка должна подходить всем отмеченным карточкам, а важные сведения о конкретной работе лучше оставить в её обычном содержимом.

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

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

Скопируйте код в T123 после выбранных блоков и опубликуйте страницу. Код проверяет наличие GSAP и подгружает библиотеку при необходимости. Если реакции нет, проверьте доступность её загрузки и правильность выбора карточек.

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

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

• У новых карточек появляется тот же выбранный эффект.
• Старые карточки не получают несколько одинаковых слоёв.
• При уходе курсора восстанавливаются текст и положение.
• Ссылки продолжают открывать нужные страницы.
• На телефоне доступно всё важное содержимое.

Если разные блоки ведут себя по-разному, проверяйте каждый тип карточек отдельно.

Читайте также: Увеличение карточек при наведении в Tilda: как настроить аккуратно · 3D-карточки в Tilda: наклон за курсором и переворот.