Matilda Design

Всем привет! Новая анимация с AWWWARDS на следующей неделе

Всем привет! 👋 Новое видео на канале: В этом видео показываю, как создать эффектную 3D-галерею в Tilda с помощью GSAP. Карточки располагаются в объемной сфере, вращаются во время скролла и дополнительно реагируют на скорость и направление прокрутки. За счет перспективы, изменения масштаба и глубины получается более живой эффект в стиле современных интерактивных сайтов. Ссылка на видео: https://youtu.be/BDq-NGPrkxI Ссылка на исходники: https://mt-webdesign-pack.ru/sphere-gallery-free

Трансформация первого экрана (новая модификация) Модификация позволяет создать эффектный переход между экранами: карточки собираются в объёмную 3D-композицию, после чего изображение плавно раскрывается и заполняет весь экран. Ссылка на страницу (платный доступ): https://mt-webdesign.ru/first-screen-transform

Всем привет! Новая анимация на этой неделе

Анимация частиц (новая модификация) Модификация превращает изображение в объёмную композицию из частиц, которая благодаря карте глубины реагирует на движение курсора, плавно разлетается и возвращается в исходную форму. Ссылка на страницу (платный доступ): https://mt-webdesign.ru/particles

Всем привет! На этой неделе в библиотеке появится новая модификация «Частицы». Вы загружаете своё изображение и карту глубины, а модификация собирает его из множества частиц и добавляет объём. Частицы реагируют на курсор, разлетаются при прокрутке страницы и затем снова формируют изображение. За счёт карты глубины эффект выглядит не плоским, появляется ощущение пространства и движения.

Скоро в коллекцию AnimateX: GSAP Edition* добавятся три новые анимации: Windows, Image Orbit и Flip Stack. Windows // 033 Картинки собираются в живую сетку и двигаются как отдельные окна. Блок сразу становится динамичнее: изображения раскрываются, смещаются…

Скоро в коллекцию AnimateX: GSAP Edition* добавятся три новые анимации: Windows, Image Orbit и Flip Stack. Windows // 033 Картинки собираются в живую сетку и двигаются как отдельные окна. Блок сразу становится динамичнее: изображения раскрываются, смещаются и красиво собирают экран в одно целое. Image Orbit // 034 Изображения закручиваются вокруг центра, будто по орбите. Получается яркий визуальный акцент, особенно для галерей, портфолио, промо-блоков и первых экранов. Flip Stack // 035 Карточки складываются в стопку и по очереди переворачиваются. Простая, но интересная анимация, которая делает смену контента более живой и заметной. 👉 Перейти на сайт 👉 Открыть доступ 🔓 Для всех, кто уже имеет доступ — новые анимации доступны без доплаты. Анимации эксклюзивны и не входят в подписку Matilda Design. AnimateX — это отдельный продукт без ограничений по подписке. Ваш личный инструмент навсегда.

Эффект ленты проектов (новая модификация) В этом видео мы разберём, как создать анимацию ленты проектов с эффектом искажения при скролле в Tilda с использованием библиотек Three.js, GSAP и её плагинов. Ссылка на страницу (платный доступ): https://mt-webdesign.ru/ribbon-mod

Всем привет! Новая модификация на этой неделе

Всем привет! В настоящее время наблюдаются сбои в работе серверов. Если у вас возникают проблемы с подключением некоторых модификаций или их корректной работой, вы можете самостоятельно обновить подключённые библиотеки, используя альтернативные источники. Список библиотек: GSAP, ScrollTrigger (для работы с анимациями из пака и некоторых модификаций) <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script> Для модификации и анимаций связаных с текстом: <script src="https://unpkg.com/split-type@0.3.3/umd/index.min.js"></script> Слайдеры: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8.3.2/swiper-bundle.min.css"/> <script src="https://cdn.jsdelivr.net/npm/swiper@8.3.2/swiper-bundle.min.js"></script> Это временная проблема. В настоящее время ведутся работы по её устранению. Приношу извинения за неудобства. !Проблема устранена. Спасибо за понимание!

Всем привет! 👋 Новое видео на канале: ТОП-5 ресурсов для анимации сайтов В этом видео я собрал ТОП-5 ресурсов для анимации сайтов, которыми сам регулярно пользуюсь в работе Ссылка на видео: https://youtu.be/fVawsdT03Dw

Как сделать сложную scroll-анимацию в Тильде В этом видео мы разберём, как создать анимацию трансформации фигуры в Tilda с помощью библиотеки GSAP и её плагинов. Ссылка на видео и исходники: https://youtu.be/1MqgxKlmob8 https://mt-webdesign.ru/morph

Понедельник

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

🚀 Масштабное обновление Matilda Design Проект вышел на новый уровень: библиотека стала чище и удобнее, а страницы инструкций продуманнее и функциональнее. Навигация теперь сворачивается, освобождая пространство для работы, фильтрация и поиск с подсказками помогают мгновенно находить нужные модификации, а количество элементов обновляется автоматически. Интерфейс стал быстрее и практичнее с превью, быстрым переходом по разделам и копированием ID и кода в один клик. Обновленные модификации: Современные кнопки Слайдер (autoscale) Карусель для проектов Скролл для портфолио Новые модификации: Мягкий блюр-курсор Скринсейвер (Screensaver)

AnimateX: GSAP Edition* Card Elevation // 032 В коллекцию добавлена новая анимация, создающая эффект стопки карточек: по мере прокрутки они поднимаются вверх и плавно закручиваются 👉 Перейти на сайт 👉 Открыть доступ 🔓 Для всех, кто уже имеет доступ — новые анимации доступны без доплаты. Анимации эксклюзивны и не входят в подписку Matilda Design. AnimateX — это отдельный продукт без ограничений по подписке. Ваш личный инструмент навсегда.

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

Урок по Тильде (Tilda) | Прелоадер счётчик В этом видео я покажу, как создать собственный прелоадер с анимацией счётчика и эффектом штор во время загрузки сайта Ссылка на видео и исходники: https://youtu.be/1a4-2tKVX5w https://mt-webdesign.ru/counter-loading

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