Как правильно использовать анимацию в дизайне интерфейсов

Ключевые принципы создания пользовательских интерфейсов для различных платформ. 28 элегантных иллюстраций-сравнений: как нужно делать и как делать нельзя.

Читать: https://proglib.io/p/kak-pravilno-ispolzovat-animaciyu-v-dizayne-interfeysov-2020-04-29

#interface #animation

CSS анимация

Плейлист от Виталия Менчуковского, посвященный анимации в CSS: https://prglb.ru/3w5u7

#video #css #animation

Анимация с искажениями

Туториал по созданию интересной анимации с помощью библиотеки Three.js - изображения искажаются при движении.

Демо здесь: https://tympanus.net/Tutorials/MotionHoverEffects/
Руководство здесь: https://prglb.ru/xvzp

#animation #tools

​"Умные" анимации с кастомными CSS-свойствами

Создание гибких настраиваемых анимаций на CSS-переменных.

Ссылка: https://prglb.ru/37yhd

#css #animation

​Видео-курс по CSS-анимациям

Почти 4 часа крутых уроков: https://prglb.ru/1utih

#video #css #animation

Создание анимации на JavaScript

10 видео с крутыми руководствами: https://prglb.ru/36e90

#video #animation

Создание анимации на JavaScript

10 видео с крутыми руководствами: https://prglb.ru/36e90

#video #animation

Mo.js

JS-библиотека для создания motion графики на JavaScript. Предоставляет полный контроль над анимацией и множество встроенных компонентов.

Ссылка: https://prglb.ru/35orb

#tools #library #animation

​Анимация частиц с использованием Web Animations Api

https://proglib.io/w/10d0a600

#css #animation

ТОП-5 React-библиотек для анимации

https://proglib.io/w/f7ed4e1f

#react #animation

Создание пиксельных эффектов на JavaScript и Canvas

https://proglib.io/w/48513ace

#animation #canvas

​AnimXYZ

Настраиваемая и производительная CSS-анимация с использованием CSS-переменных

https://proglib.io/w/349cbab3

#tools #library #animation

Побуквенная анимация текста

Применение анимации к каждой букве текста отдельно для создания плавного эффекта: https://proglib.io/w/1986676c

#animation #interface

​Интерактивное руководство по CSS-переходам

Большой гайд с примерами: https://proglib.io/w/d499bab7

#css #animation

Расширенная анимация CSS с использованием cubic-bezier()

При создании сложных CSS-анимаций мы часто пишем сложные развернутые @keyframes. Однако есть прием, который может здорово упростить задачу и сократить количество кода - создание пользовательских временных функций с помощью cubic-bezier().

В статье невероятные анимации вообще без keyframes: https://proglib.io/w/eeee3486

#css #animation

​Keyframe-анимация: интерактивное руководство

https://proglib.io/w/8644afae

#css #animation

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

Очень красивый эффект при наведении: https://proglib.io/w/a61647c9

#interface #animation #snippets

​Анимации в библиотеке компонентов

Виды анимаций, UX/UI паттерны, подходы в Angular с dependency injection: https://proglib.io/w/af55b5d2

#animation #angular #interface