Урок по Тильде (Tilda) | Анимация по скроллу на GSAP

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

Ссылка на видео и исходники:
https://youtu.be/pps1HcMTf_k
https://mt-webdesign-pack.ru/scroll-twist

Всем привет!
Недавно я обновил главную страницу сайта и выставил работу на конкурс CSS Design Awards.

Буду очень рад, если вы поддержите проект голосом! Ничего сложного, просто отметьте плюсы в категориях UI Design, UX Design, Innovation. (регистрация не нужна)

Каждый голос действительно важен, и с вашей помощью есть реальные шансы на победу. Огромное спасибо!

https://www.cssdesignawards.com/sites/matilda-design/48164/

Из новостей:

Matilda получила Best UI Design, Best UX Design, Best Innovation и Special Kudos!
В ближайшее время выйдут обновления старых модификаций, а также появятся несколько новых.
А в AnimateX: GSAP Edition ждите пополнение: Infinite Scroll, Phantom Slide и Pixel Ripple.

AnimateX: GSAP Edition*

В коллекцию добавлены три новые уникальные анимации:
23. Infinite Scroll
24. Phantom Slide
25. Pixel Ripple

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

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

Обновление:

✨ Подсвечивание текста v3
- Полная совместимость с автоскейлом и Safari
- Корректная работа с переносами строк
- Поддержка тегов: <br>, <strong>, <em>, <u>, <a>
- Совместимость с типографом
- Новая видеоинструкция
mt-webdesign.ru/highlights

_____________________________

💧 Переливающаяся кнопка
- Исправлен баг с перекрытием кнопки
mt-webdesign.ru/btn-gradient

_____________________________

🃏 Слайдер (autoscale)
- Исправлен баг с Safari
- Добавлено авто-переключение слайдов
mt-webdesign.ru/mt-carousel-zero

_____________________________

🖼 Перелистывание изображений
- Исправлен баг с зумом
mt-webdesign.ru/slide-img

_____________________________

🎨 Смена палитры по скроллу
- Новая система переключения шапки
- Новая видеоинструкция
mt-webdesign.ru/header-change

Урок по Тильде (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 — это отдельный продукт без ограничений по подписке. Ваш личный инструмент навсегда.