Друзья, здесь был канал, в котором я публиковал портфолио дизайнеров.

Сейчас переделываю его в уроки для дизайна сайтов в инструменте Framer.

Кому актуально интересно, оставайтесь, будет много полезного.

3D-анимация сетки при скролле
#Ресурсы

Это проект Framer, воссозданный по примеру сайта Lumen Art Space.

・・・

→ Демо
→ Ремикс

Как создать свои брейпоинты
#Уроки

По умолчанию Framer свои стандартные брейпоинты для страницы.

Но вы всегда можете сделать свою собственную систему.

Жидкое искажение
#Ресурсы

Эффект жидкого искажения, воссозданный во Framer на основе работы Ксении Кондрашовой.

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

・・・

→ Демо
→ Ремикс

Пискельное искажение
#Ресурсы

Еще один эффект искажения на основе работы Ксении Кондрашовой. На этот раз деформация изображения через пиксели.

Настройки
・Выбор изображения
・Размеры ячеек
・Амблитуда движения
・Скорость движения

・・・

→ Демо
→ Ремикс

3D-превью при наведении
#Ресурсы

Интеренсный компонент с трехмерным раскртием списка. Подойдет для предпросмотра проектов.

・・・

→ Демо
→ Ремикс

Стеклянная кнопка
#Ресурсы

С эффектам преломления, искажения и рефлексией. Конечно, это псевдо-эффекты, но выклдяит все равно красиво

・・・

→ Демо
→ Ремикс

Карточка проекта с 3D-флипом

Отлично подойдет для карточек в портфолио, чтобы показать больше изображений при наведении.

・・・

→ Демо
→ Ремикс

КАК сделать авто-воспроизведение видео при прокрутке

1. Оберните видео в компонент.

2. Создайте два варианта: «playing» (воспроизводится) и «not playing» (не воспроизводится).

3. Используйте scroll variant effect с триггером layer in view, чтобы переключать варианты, когда слой попадает в область видимости.

Свайп карточек

Еще один крутой пример для взаимодействия с карточками.

・・・

→ Демо
→ Использовать бесплатно

Выбор статуса

Микроинтерактивный компонент для выбора статуса.

Врядли это можно использовать как-то в реальном проекте, но как вариант для пикера вполне годно.

・・・

→ Демо
→ Использовать бесплатно

[Обнолвение Framer]
Динамическая оптимизация

Вчера выкатили обновление, в котором заявляют, что добавили новый способ оптимизации опубликованных сайтов.

Теперь страницы оптимизируются при первом посещении, а результат кэшируется.

Проверить наглядно мы конечно не можем, но верим.

Как создать зависимые поля в форме

1. Скрыть одно из полей.

2. Преобразовать форму в компонент.

3. Создать новый вариант, в котором это поле отображается.

4. Связать взаимодействие: при клике по чекбоксу переключать на вариант, где поле показано.

Shader Lines

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

・・・

→ Демо
→ Использовать бесплатно

Светящийся скевоморфный таббар

Компонент очень изящного таббара со свечением.

・・・

→ Демо
→ Использовать бесплатно

Настрочные символы во Framer

1. Выдели текст
2. Добавь OpenType
3. Включи опцию “Superscript” (надстрочный)

SVG-анимация линий

В самой этой анимации ничего удивительного, конечно, нет.

Но когда понимаешь, что такое можно сделать за 5 секунд и сразу опубликовать на сайт, то это просто восторг.

・・・

→ Демо
→ Использовать бесплатно

Инпут с конфетти

Анимация конфетти из иконок при вводе текст в инпут.

・・・

→ Демо
→ Использовать бесплатно

Необычная навигация

Красивый компонент навигации, с блюром фона.

・・・

→ Демо
→ Использовать бесплатно