Анимации

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

40 примеровПакет

01Find something new.

Попробуй взаимодействие

Shared layout tabs

Индикатор плавно переезжает между вкладками

Интерфейсlayout-tabs

01Aa

02↗

03◎

04&

Попробуй взаимодействие

FLIP reordering

Карточки сохраняют непрерывность при перестановке

Интерфейсgrid-reorder

Попробуй взаимодействие

Shared element expansion

Компактная карточка раскрывается в подробности

Переходыcard-expand

01FORM

02SPACE

03OBJECT

1 / 3

Попробуй взаимодействие

Depth carousel

Активная карточка выходит на передний план

Пространствоcarousel-depth

Попробуй взаимодействие

Elastic disclosure

Секция открывается с мягким выдвижением

Интерфейсaccordion-spring

Попробуй взаимодействие

Notification stack

Новые уведомления складываются в глубину

Интерфейсtoast-stack

Curtain navigation

Меню раскрывается несколькими полосами

Переходыmenu-curtain

Radial action menu

Действия раскрываются вокруг центральной кнопки

Интерфейсmenu-radial

Попробуй взаимодействие

Dock magnification

Иконки увеличиваются в окрестности курсора

Курсорdock-magnify

Три точки фиксации / мышь или стрелки

Перетаскивай или используй кнопки

Snap points

Перетаскивание заканчивается на ближайшей позиции

Жестыdrag-snap

SELECTED IDEA / 01Be curious.← Пропустить / Сохранить →

Перетаскивай или используй кнопки

Swipeable deck

Карточка уходит за край и открывает следующую

Жестыswipe-deck

50%Intensity

Попробуй взаимодействие

Elastic slider

Ползунок растягивается и возвращается в границы

Жестыelastic-slider

Попробуй взаимодействие

Motion path

Объект движется по нарисованной траектории

SVGsvg-route

Попробуй взаимодействие

Polygon morph

Контур превращается в другую фигуру

SVGsvg-morph

Gooey merge

Кнопки слипаются и расходятся как капли

SVGgooey-menu

Попробуй взаимодействие

Particle burst

Короткий выброс частиц подтверждает действие

Частицыparticle-burst

COLOR IN MOTION

Попробуй взаимодействие

Mesh gradient flow

Цветовые поля плавно перемещаются внутри сцены

Фоныmesh-flow

AURORA / STUDY 02

Попробуй взаимодействие

Aurora ribbons

Полупрозрачные ленты создают спокойный фон

Фоныaurora-flow

Попробуй взаимодействие

Distance stagger grid

Волна расходится по сетке от точки клика

Появлениеgrid-wave

CHAPTER 01A NEW

CHAPTER 02POINT

CHAPTER 03OF VIEW

Прокрути внутри сцены

Horizontal scroll story

Вертикальный скролл двигает горизонтальную ленту

Скроллhorizontal-story

LOOKCLOSER◎

Прокрути внутри сцены

Scroll zoom scene

Прокрутка приближает объект в закреплённой сцене

Скроллscroll-zoom

Попробуй взаимодействие

Image curtain reveal

Изображение открывается каскадом вертикальных масок

Появлениеimage-curtain

Потяни. Отпусти. Ещё раз.k 140 / damping 15

Drag & spring

Перетаскивание и пружинный возврат

Взаимодействиеspring

POINTER-DRIVEN / 120msПодведи курсор ближе

Magnetic button

Магнитная область вокруг кнопки

Курсорmagnetic

Stay curious.

Проведи курсором

Cursor spotlight

Световое пятно следует за курсором

Курсорspotlight

MEMBERSHIP / 001A different
perspective.

Perspective tilt

Карточка меняет ракурс от движения мыши

Курсорtilt-card

Нарисуй траекторию курсором

Motion trail

Шлейф с задержкой и затуханием

Курсорcursor-trail

Line reveal

Построчное появление через маску

Появлениеreveal

First thought.

A new direction.

The final detail.

Staggered entrance

Каскадное появление элементов

Появлениеstagger

A fresh
start.

Another
perspective.

Mask wipe

Раскрытие нового слоя по диагонали

Переходыmask-wipe

VIEW TRANSITION API

Change the scene.

View transition

Пространственная смена состояния

Переходыtransition

Нажми на карточку

3D flip

Оборот карточки в перспективе

Переходыflip

Нажми, чтобы изменить контур

Shape morph

Плавная трансформация контура

Переходыmorph

DEPTH

A different
perspective.

ПРОКРУТИТЕ ВНУТРИ СЦЕНЫ ↓

Layered parallax

Разная скорость переднего и заднего плана

Скроллparallax

FORM

Ideas take shape.
One layer at a time.

ПРОКРУТИТЕ ВНУТРИ СЦЕНЫ ↓

Идея задаёт направление.

Материал определяет характер.

Детали собирают целое.

Sticky chapters

Закреплённая сцена и смена глав

Скроллstack

Take your time.

Это отдельная область прокрутки. Полоса сверху показывает, какую часть текста ты прочитал.

Индикатор связан с реальным положением прокрутки. Он не меняет скорость и не перехватывает управление.

Читатель может использовать колесо мыши, касание или клавиатуру.

You made it.

Scroll progress

Прогресс чтения внутри секции

Скроллscroll-progress

MAKE IT MOVE ✳ MAKE IT MATTER ✳

CSS / LINEAR / INFINITE

Seamless marquee

Бесконечная строка без шва

Циклыmarquee

Orbital motion

Несколько орбит с разным периодом

Циклыorbit-motion

Details
make the difference.

Border tracing

Обводка рисуется по контуру

Появлениеborder-draw

Click ripple

Волна подтверждает точку нажатия

Взаимодействиеripple