Урок по Тильде (Tilda) | Магнитное отталкивание карточек

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

Ссылка на видео и исходники:
https://youtu.be/PuPZmDZIViY
https://mt-webdesign.ru/repulsion

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

Рад сообщить, что все проблемы устранены! Я полностью отказался от системы наполнения карточек и фильтрации Тильды, теперь это полностью самописная система.

Что нового:
- Исправлен баг с поиском модификаций.
- Исправлен баг с фильтрацией по тегам.
- Кнопка «Очистить» объединена с кнопкой «Сбросить фильтр».
- Полностью переработана страница главной библиотеки.
- Внедрена новая система поиска: теперь поиск выполняется одновременно по ключевым словам и фильтрам.
- Два фильтра: «Бесплатные» и «В подписке» вынесены в отдельную категорию. - Теперь можно выбрать категорию, например «Бесплатные», и одновременно фильтровать по другим тегам («текст», «кнопки» и т.д.).
- Переработана система фильтрации по тегам: убраны лишние, добавлены новые. Теперь поиск и фильтры работают совместно, можно сначала найти нужные модификации через поиск, а затем отфильтровать их по категориям «Бесплатные» или «В подписке».
- Добавлена динамическая подгрузка контента: новые карточки загружаются автоматически при прокрутке страницы.
- Добавлены новые варианты отображения карточек: две в ряд, три в ряд, список. При этом запоминается, какой способ отображения использовался в последний раз.

Более подробные нововведения в коротком видео.

AnimateX: GSAP Edition*

В коллекцию добавлена новая анимация 27 // Infinite Stack.

Она создаёт эффект «картотеки» для проектов, изображений или любых карточек, добавляя ощущение глубины при взаимодействии.

👉 Перейти на сайт
👉 Открыть доступ

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

Кнопки со стрелками, Анимация для кнопок (Обновление):

- Исправлен баг с отображением кнопок связанный с обновлением Тильды

AnimateX: GSAP Edition*

В коллекцию добавлены две новые анимации:
26. Perspective Flip
29. Balloon

👉 Перейти на сайт
👉 Открыть доступ

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

Обновление

Боковое меню
Исправлено:
проблема с отображением меню, связанная с обновлением Tilda
https://mt-webdesign.ru/side-menu

Ступенчатое меню
Исправлено:
мелкие правки отображения бургера в Safari
https://mt-webdesign.ru/stairs-nav

Магнитное отталкивание карточек
Добавлено:
возможность наполнять карточки контентом (новое видео)
https://mt-webdesign.ru/repulsion-card

Простой прелоадер
Исправлено:
запуск анимации текста при загрузке
https://mt-webdesign.ru/simple-preloader

Переключение изображений
Исправлено:
в шаблоне устранена проблема с корректным отображением ссылок
https://mt-webdesign.ru/image-slide

В моём блоге вышло новое видео (Matilda Blog)

Tilda: что такое CSS и как его использовать
В этом видео мы разберём, что такое CSS, зачем он нужен, какие существуют способы подключения стилей и как по-разному работать с элементами на Тильде. Также рассмотрим, как CSS функционирует именно в рамках платформы Tilda.

Если у вас возникают проблемы с просмотром видео на YouTube, на сайте доступен альтернативный плеер.

Ссылка на страницу: https://mt-webdesign-blog.ru/whatiscss
Ссылка на YouTube: https://youtu.be/6aJdpjRGzP4

Также на сайте видео будут выходить раньше.

Как понять на чем сделан сайт? (Matilda Blog)

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

Ссылка на страницу: https://mt-webdesign-blog.ru/determine-website-cms

Tilda: добавляем детали с помощью CSS

В этом видео разберём, как с помощью CSS можно добавлять декоративные элементы к основным. На примере кнопки рассмотрим, как можно расширить стилизацию элементов.

Если у вас возникают проблемы с просмотром видео на YouTube, на сайте доступен альтернативный плеер.

Ссылка на страницу: https://mt-webdesign-blog.ru/btn-css
Ссылка на YouTube: https://youtu.be/jN6ThZlr9yQ

AnimateX: GSAP Edition*
Morph State // 030

Скоро в коллекцию будет добавлена 30-я анимация.
Анимация, которая ломает границы и превращает один элемент в три других, создавая ощущение трансформации при прокрутке


👉 Перейти на сайт
👉 Открыть доступ

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

Я не стану подводить итоги года, у каждого они свои. Скажу лишь от себя: я невероятно счастлив, что довелось пообщаться с каждым из вас. Рад, что вы живые, настоящие, и помогали развиваться, как мне, так и платформе. Каждое мнение и каждая идея не остались незамеченными. Спасибо всем.
Кому-то с наступающим Новым годом. В моём случае уже с Новым годом. Всем привет с Дальнего Востока!

Современные кнопки (новая модификация)

Модификация включает в себя 3 разные анимации для кнопок.

Ссылка на страницу (платный доступ):
https://mt-webdesign.ru/modern-btn

AnimateX: GSAP Edition*
Snake // 031

Скоро в коллекцию будет добавлена 31-я анимация.
Анимация формирует эффектную 3D-змею из карточек, которая оживает при скролле.

👉 Перейти на сайт
👉 Открыть доступ

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

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

Главная страница
Сворачиваемая панель навигации (Возможности):
- Панель можно сворачивать; карточки разворачиваются и увеличиваются, освобождая больше рабочего пространства.
- Фильтрация контента по категориям.
- В каждой категории отображается актуальное количество модификаций.

Фильтр и поиск по сайту (Возможности):
- Фильтрация по типу доступа: «Бесплатно» и «В подписке».
- Количество модификаций автоматически обновляется как в общем списке, так и внутри категорий.
- Поиск по названиям и ключевым словам с подсказками при вводе.
- Быстрый сброс всех фильтров.

Детальная страница инструкции:
- Полностью переработан дизайн страниц.
- Добавлена сворачиваемая панель навигации, позволяющая быстро переходить в нужный раздел и изменяющая размер рабочей области.
- Реализован поиск по модификациям с визуальными подсказками и мгновенным переходом на нужную страницу.
- В правой панели добавлены изображения-превью модификаций.
- Возможность копирования ID шаблона в один клик.
- Полностью переработана пошаговая инструкция.
- Обновлён интерфейс и система копирования кода.

Урок по Тильде (Tilda) | Прелоадер счётчик

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

Ссылка на видео и исходники:
https://youtu.be/1a4-2tKVX5w
https://mt-webdesign.ru/counter-loading

Технические работы на сайте (Matilda Design)
7 марта в 04:00 по МСК на сайте будут проводиться технические работы, связанные с крупным обновлением библиотеки.

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

О завершении работ будет сообщено дополнительно в группе

AnimateX: GSAP Edition*
Card Elevation // 032

В коллекцию добавлена новая анимация, создающая эффект стопки карточек: по мере прокрутки они поднимаются вверх и плавно закручиваются

👉 Перейти на сайт
👉 Открыть доступ

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

🚀 Масштабное обновление Matilda Design

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

Обновленные модификации:
Современные кнопки
Слайдер (autoscale)
Карусель для проектов
Скролл для портфолио

Новые модификации:
Мягкий блюр-курсор
Скринсейвер (Screensaver)

Всем привет! 👋
Новое видео на канале:

5 принципов построения анимаций на Awwwards
В этом видео разберём самые популярные типы веб-анимаций:
- анимации по скроллу
- появление элементов в области видимости
- покадровую анимацию
- анимации интерфейса
- текстовые эффекты
Покажу, как такие анимации используются на современных сайтах и какие технологии чаще всего применяют для их реализации.

Ссылка на видео: https://youtu.be/ZiK0C65luOQ