Обновление

Боковое меню
Исправлено:
проблема с отображением меню, связанная с обновлением 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

Понедельник

Как сделать сложную scroll-анимацию в Тильде

В этом видео мы разберём, как создать анимацию трансформации фигуры в Tilda с помощью библиотеки GSAP и её плагинов.

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

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

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

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