🎉 Победители, выбранные случайным образом:

🥇 1 год подписки — Алёна
🥈 6 месяцев подписки — Вадим
🥉 3 месяца подписки — Дарья
🏅 2 месяца подписки — Каусария
🏅 2 месяца подписки — Мария

Поздравляю победителей! 🎊
Доступ будет открыт автоматически.

Спасибо всем, кто поддержал проект — это действительно важно!
Если вы не выиграли — не расстраивайтесь: впереди ещё розыгрыши и крутые обновления!

AnimateX: GSAP Edition*

Была проведена масштабная работа по обновлению AnimateX

- Полностью переписан код анимаций. Теперь он чище, стабильнее и быстрее.
- Улучшена кроссбраузерность. Решена проблема совместимости Safari и автоскейла от Tilda с 20 анимациями.
- Разработана новая механика подключения анимаций — проще, гибче, надёжнее.
- Подготовлены новые пошаговые инструкции и обновлены видео-гайды.
- Переработан дизайн шаблонов. Теперь они современнее, аккуратнее и лучше вписываются в разные стили и задачи проектов.
- Добавлены 5 новых современных анимаций. Сложных внутри, но простых в использовании.

Новые анимации:
17. Depth Zoom
18. Motion Path
19. Cards index
20. Slide Mask
21. Spin Path

👉 Ссылка на сайт
👉 Открыть доступ

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

Ступенчатое меню

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

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

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