Платформа eComm для поддержки базирующегося в Сиднее социального предприятия Two Good, которое существует для того, чтобы изменить ход жизни женщин, переживших бездомность и насилие в семье.

Шрифты: Helvetica, Futura, ABC
Цвета: #000000

⚡️Смотреть сайт

#Animation #Storytelling #UI

Комплект абстрактных анимаций

• Набор из 25+ анимаций градиента

#animation #gradient

Открыть в Figma

LottieFiles

Классные анимации для вашего сайта.

#animation

ОТКРЫТЬ

Паралакс эффект.

• Паралакс создан с помощью плагина Perspective Toolk.

#animation

Открыть в Figma

Меню гамбургера.

• Очень простая анимация для иконок меню гамбургера.

#animation #hamburger #icons

Открыть в Figma

Анимация и флоу приложения в Figma.

• Лоадеры, онборд и простенькое флоу приложения по штрафам.

#Animation #Mobile #App

Открыть в Figma

Анимированный паттерн

• 6 слайдов с анимацией

#animation #pattern

Открыть в Figma

Parallax Animation

Параллакс-эффект при скроллинге веб-страницы.

#animation

ОТКРЫТЬ

Анимация и флоу приложения в Figma.

• Лоадеры, онборд и простенькое флоу приложения по штрафам.

#Animation #Mobile #App

Открыть в Figma

Спрайты в вебе. Джош Комо показывает, как анимировать спрайты в CSS во вьюпорте <img>: object-fit, object-position и steps(jump-none) для чёткой покадровой смены, а также разбирает, когда спрайты лучше GIF и когда лучше процедурная анимация. #css #animation

https://www.joshwcomeau.com/animation/sprites/

25 Button Hover Animations

Внутри файла вы найдете 25 уникальных анимированных кнопок с возможностью изменить стиль с заливки на контур или использовать один из предустановленных параметров radius.

#animation

ОТКРЫТЬ

Animated Counter

Анимированный счётчик.

#animation

ОТКРЫТЬ

Loaders K 1 Two Steps

Набор из 18 анимаций загрузки экрана, разработанных в Figma, которые вы можете использовать бесплатно.

#animation

ОТКРЫТЬ

Анимация веб-сайта Apple

#animation

Открыть в Figma

Загнутый уголок на CSS. Китти Жиродель разбирает эффект при наведении, при котором угол изображения загибается. Техника сочетает clip-path для обрезки, белый треугольник для складки и тени под ним. Статья также описывает фолбек для эффектов размытия с помощью нескольких смещённых элементов и показывает, как CSS-переходы обеспечивают плавную анимацию. #css #animation

https://kittygiraudel.com/2026/03/05/folded-corner-with-css/

25 Button Hover Animations

Внутри файла вы найдете 25 уникальных анимированных кнопок с возможностью изменить стиль с заливки на контур или использовать один из предустановленных параметров radius.

#animation

ОТКРЫТЬ

Анимации, управляемые прокруткой. Джош Комо разбирает CSS animation-timeline, где кадры анимации раскладываются по расстоянию прокрутки, а не по времени. Рассказывает про функции тайминга, диапазоны анимации (cover, contain, entry, exit), проценты диапазонов, таймлайны прогресса прокрутки и связанные таймлайны через view-timeline и timeline-scope. Поддержка около 85%, в Firefox — за флагом. #scroll #animation

https://www.joshwcomeau.com/animation/scroll-driven-animations/

SVG с нуля. Кармен Ансио предлагает посмотреть на SVG не как на формат графики, а как на DOM: каждая фигура — элемент, каждый атрибут — стиль, всё это можно стилизовать на CSS, анимировать и менять через JavaScript. Она разбирает viewBox, пять основных фигур (circle, rect, line, polygon, path), анимацию обводки stroke-dasharray, <defs>, <clipPath> и JS-хелперы вроде getTotalLength(). #svg #animation

https://www.carmenansio.com/articles/svg-from-scratch