#фишка дня

Итак, встала задача расширить элемент при наведении. Да ещё с каким-нибудь пружинящим дефектом эффектом. Что делать?

На самом деле, элемент мы физически не расширяем. Такова задача.

Один из первых вариантов, помимо манипуляции непосредственно размерами (что довольно тяжело при отрисовке) — это box-shadow. Но вот градиенты таким способом не нарисовать...

Потому у нас есть два варианта! Первый, от Adam Argyle (осторожно, видео из его твиттера и содержит крики на его же детей 😃) и от Temani Afif.

Итак, первый способ: использовать border-image и анимировать свойство border-image-outset.

Пример: https://codepen.io/argyleink/pen/abxgPKE?editors=1100

Второй, более очевидный, на самом деле — анимация clip-path, а точнее параметров функции inset.

Пример: https://codepen.io/t_afif/pen/BaEgEGa?editors=1100

Разница, кстати, имеется. В первом случае градиент нарисован border-image и прыгает вместе с ним, а во втором — буквально, обрезается.

Так что выбирайте тот, что вам по душе :)

#css #border #clip #animation

#статья дня

Вы (да и я) могли раньше не обращать внимания, но animation-timing-function применяется к каждому ключевому кадру, описанному в блоке keyframes.

Т. е. имея такую анимацию:

box-animation {
from, 5% {
left: 10px ;
}
25%, 40% {
left: 30% ;
}
60%, 75% {
left: 70% ;
}
95%, to {
left: calc( 100% - 90px ) ;
}
}

и animation-timing-function равный cubic-bezier(.55, -0.64, .42, 1.63) мы получим результат, изображённый на иллюстрации. Т. е. функция анимации будет применена на каждый временной отрезок, а не на всё время проигрывания. Думайте об этом как о color-stop в градиентах.

Такое поведение описал Бен Нэйдл (Ben Nadel) в своей статье https://www.bennadel.com/blog/3885-animation-timing-functions-get-applied-per-keyframe-in-css.htm

#css #animation #keyframes

#статья дня

Тот случай, когда статья девятилетней почти давности не потеряла ни капли актуальности. Превращаем GIF в SVG и анимируем с помощью CSS: https://cssanimation.rocks/buffer/

1. Как векторизовать изображение (трейсинг).
2. Как разбить анимацию на составляющие (метод таймлайна).
3. И как, собственно, реализовать на ключевых кадрах.

Вечнозеленая, я бы сказал, статья.

#css #svg #gif #animation

#codepen дня

Давайте немного развлечёмся. Кто-то не так давно в чате канала выкатил большой SCSS-цикл для анимации, но саму анимацию зажал (ай-яй-яй).

Давайте исправим положение и сделаем что-то насущное.

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

Поехали: https://codepen.io/alinaki/pen/ZEaOdKq

Заодно использована интересная фишка CSS Grid: наложить две ячейки друг на друга без абсолюта.

#css #grid #animation #scss #бородач

#фишка дня

Одна из самых недооценённых возможностей CSS-анимаций, это функция steps(n).

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

Почему недооценена? Потому что SVG, Lottie и Rive-анимации предоставляют чуть больше возможностей, но ценой подключения скриптов или целого рантайма. А всего-то надо подготовить лист спрайтов-кадров.

Поэтому сегодня я дам вам два примера. Первый — анимашка шагающего пиксель-артного Локи: https://codepen.io/alinaki/pen/GRPrYdv

Здесь есть небольшой хак чтобы картинка стала отзывчивой: вместо размера указано соотношение сторон, а фон сдвигается в процентах. Ну и, чтобы пиксель-арт оставался собой, а не размывался, стоит накинуть соответствующее правило image-rendering.

И наглядно от мэтра Джея: https://codepen.io/jh3y/pen/KKbpeBQ

Если концепция спрайтов вам совсем не знакома, в этом примере можно включить раскадровку.

Никаких рантаймов, красота.

#css #sprite #animation #бородач

#codepen дня

На WWDC24 Apple похвастались тем, что на SwiftUI теперь можно создавать параллакс-галереи буквально несколькими строчками кода.

Но мы же с вами все знаем, что Web намного круче, как платформа. Мы тоже так умеем!

Правда, только в Chrome...

Ведь у нас есть CSS-переменные и Scroll Timeline API, который мы рассматривали вот тут, даже с полифиллом: https://t.me/htmlshit/621

Итак, вашему вниманию конфигурируемая параллакс-галерея от Джея: https://codepen.io/jh3y/pen/XWwzYZo

Весь JS там — это часть универсальной панели управления, чтобы задавать параметры.

#css #scroll #animation

#ссылка дня

Уже известный нам Ван Дамм, который Брамус, не так давно присоединился к команде деврелов Google Chrome. В какой роли?

Конечно же в роли евангелиста анимаций по скроллу! Кто бы мог подумать :)

Я уже ссылался на его работы и ранее, но теперь всё серьёзно.

Итак, под брендом Chrome for Developers (это вообще отличный проект, занимающий нишу чуть иную, нежели MDN) Брамус выпустил серию видео для обучения анимаций по скроллу в CSS.

Вот: https://developer.chrome.com/blog/scroll-driven-animations-video-course

Ну или ссылка сразу на плейлист: https://www.youtube.com/playlist?list=PLNYkxOF6rcICM3ttukz9x5LCNOHfWBVnn

И не только обучению, но и паре трюков! Например, определение направления скролла или срабатывание только один раз.

Учитывая, что Scroll Timeline API уже используются даже в Airbnb (пруф), счастливое будущее не за горами!

#css #scroll #animation

#расширение дня

В дополнение к недавнему посту про курс Брамуса Ван-Дамма посвящённого CSS-анимациям по скроллу, хотелось бы приложить его расширение для Chrome, позволяющее их отлаживать.

На иллюстрации, например, отладка всё того же проекта AirBnb: https://www.airbnb.com/release

Ссылка на расширение находится на сайте, посвящённом скролл-анимациям вообще, что само по себе максимально полезно: https://scroll-driven-animations.style/

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

#css #scroll #animation

#фишка дня

Как анимировать элемент по клику на чистом CSS?

Ведь псевдокласс :active даётся ровно в тот момент, когда ты нажимаешь кнопку мыши и тут же пропадает, как кнопка была отжата.

Например, как сделать эффект «копирования» текста, как на видео? Совсем неохота навешивать что-то ещё на onmousedown и onmouseup...

Ответ на самом деле не столь очевиден, как может показаться. И имя ему :not(:active).

Схема работы проста. Навесили конечное состояние перехода на неактивное состояние, а на активное — установили начальное.

Выглядит в итоге как-то так:

https://codepen.io/alinaki/pen/wvEdaWG

И никакого жонглирования классами не надо.

#css #active #click #animation #бородач

#фишка дня

— Криса Койера знаешь?
— Нет
— Дядька мой

Ладно, кроме шуток. Часто CEO вашей компании даёт стримы и уроки по вёрстке? А CEO CodePen — даёт. От скуки, может?

И тема сегодняшнего выпуска — offset-path. Или как заставить объект следовать контуру.

Сразу демо: https://codepen.io/chriscoyier/pen/ZEdpVev

Весь кайф в том, что offset-path принимает не только описание кривой SVG, но и значения боксовой модели вроде border-box, что означает, что в качестве кривой будут границы родителя!

Да, как правило речь почему-то всегда о круге или волне, но, по-моему, следование квадрату не менее эффектно.

Ну и вообще в официальном твиттере компании CodePen много неожиданного вываливают.

#css #path #animation

#статья дня

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

И возвращаюсь я к вам с отличной статьёй о современной анимации SVG в CSS.

Встречайте: https://courses.nan.fyi/blog/svg/animating-figma-exports

Как это делать быстро, просто и учитывая современные тенденции в дизайне и разработке. Естественно, в статье упор на экспорт из Figma :)

И не просто экспорт, а адаптация под конкретные нужды! Кратко объясняется, как разделять контуры и как в принципе мыслить в рамках анимациеи, а не просто чёрточками на экране. На что влияют разные параметры экспорта и так далее.

Давно я с таким удовольствием не читал подобное.

#svg #css #animation

#статья дня

Я тут в нашем продукте всё пытаюсь сделать идеальные всплывающие уведомления, aka тосты.

Потому что выскакивают, как хлеб из тостера.

Поначалу они были сугубо императивные, вызвали уведомление вручную, вручную же скрыли все разом или по некому id. Потом я решил объединить уведомления и некоторые виды модальных окон (например, подтверждение или отмену действия).

Параллельно я начал переписывать императивные уведомления на React, потому что на тот момент приложение стало гибридным. Получалось вроде неплохо. Но в какой-то момент...

В какой-то момент я на полную познал, что такое гипотеза Чёрной Королевы (забавно, что в английском языке — Красной Королевы). В простейшем варианте она звучит так: "Нужно бежать, чтобы оставаться на месте". Непомерно много усилий требуется, чтобы лишь чуть-чуть двигаться вперёд.

В мире разработки она же значит, что на один закрытый баг — получаешь пятнадцать новых :)

Да, пришло время признать, что я со своей реализацией уведомлений зашёл в тупик, и надо смотреть в сторону альтернатив.

И тут попадается нечто прекрасное, компонент Sonner: https://emilkowal.ski/ui/building-a-toast-component

И сразу ссылка на репозиторий: https://github.com/emilkowalski/sonner

Статья буквально на острие взаимодействия CSS и JS, объяснены принципы построения анимаций на CSS-переменных и управления ими из React-приложения.

Сами же тосты реализованы на простой шине событий, что весьма надёжно.

В общем, я ещё свой поиск идеальной реализации не завершил, но Sonner — максимально к ней близок.

#react #toasts #notification #animation

#codepen дня

Как всегда, немного настоящего будущего. На днях я сидел и думал, как было бы круто повторить анимацию по скроллу, которую много-много лет назад мы в студии делали для одного рекламного агентства.

Но там всё было просто: перехват события колёсика/тачпада и перенос на горизонтальное движение. Да, мы были настолько ленивы, что даже не стали имитировать скроллбар на первом экране. Всем хватило, все довольны.

Но вот на дворе 2024 год, появились нативные CSS-анимации по скроллу. Да, пока только в Chrome и Firefox за флагом, но, опять же, знай свою аудиторию! Да и полифиллы есть :)

В общем, великолепная Ана Тюдор и её демо с горизонтальной анимацией по вертикальному скроллу: https://codepen.io/thebabydino/pen/WNqJXXa

И секрет тут прост: position: sticky, 100vh и немного магии через animation-timeline, который мы когда-то уже обозревали.

Короче, моё демо теперь тоже не за горами :)

#css #scroll #animation

#фишка дня

А заодно поддерживающая #статья.

Итак, анимация height до auto-значений!

Я не могу написать «я джва года ждал», потому что лично я ждал больше 12 лет!

Да, у нас была анимация min-height (максимально мерзко выглядящая). Да, год назад нам дали анимацию гридов, что скрашивало существование, но заставляло добавлять лишние обёртки.

И вот оно, свершилось! В Google Chrome 129 появилось свойство interpolate-size: allow-keywords, дающее возможность, полностью сохраняя обратную совместимость, включать интерполяцию контентозависимых свойств узлов до auto!

В них входят: width, height, min-content, max-content, fit-content и так далее.

Да, в остальных браузерах речи о поддержке пока не идёт, но это не та вещь, за которую стоит воевать. Ну не будет анимации и не будет, не страшно.

Кодпен с иллюстрации к посту: https://codepen.io/alinaki/pen/abezWpO

Только посмотрите, как просто:

:root {
  interpolate-size: allow-keywords;
}

p {
  transition: 1s;
  overflow: hidden;
}

p:not(:hover) {
  height: 5lh;
}

Да, мне ещё очень нравится единица измерения lh aka line-height. Ну просто красота.

И обещанная статья из блога разработчиков: https://developer.chrome.com/docs/css-ui/animate-to-height-auto

Будущее здесь, котаны!

#css #height #animation #auto

#фишка дня

Итак, встала задача расширить элемент при наведении. Да ещё с каким-нибудь пружинящим дефектом эффектом. Что делать?

На самом деле, элемент мы физически не расширяем. Такова задача.

Один из первых вариантов, помимо манипуляции непосредственно размерами (что довольно тяжело при отрисовке) — это box-shadow. Но вот градиенты таким способом не нарисовать...

Потому у нас есть два варианта! Первый, от Adam Argyle (осторожно, видео из его твиттера и содержит крики на его же детей 😃) и от Temani Afif.

Итак, первый способ: использовать border-image и анимировать свойство border-image-outset.

Пример: https://codepen.io/argyleink/pen/abxgPKE?editors=1100

Второй, более очевидный, на самом деле — анимация clip-path, а точнее параметров функции inset.

Пример: https://codepen.io/t_afif/pen/BaEgEGa?editors=1100

Разница, кстати, имеется. В первом случае градиент нарисован border-image и прыгает вместе с ним, а во втором — буквально, обрезается.

Так что выбирайте тот, что вам по душе :)

#css #border #clip #animation #бородач

#инструмент дня

Этого следовало ожидать и оно свершилось!

Дамы и господа, без лишних слов: библиотека и конструктор анимаций для Tailwind — Motion.

Сходу ссылка: https://rombo.co/tailwind/#animator

Казалось бы, бери да используй CSS-анимации, но... тут уж как есть. Думаю, работающим с тейлвиндом людям должно быть удобно, да и для конструкторов самое то.

Но, кроме шуток, инструмент и правда довольно оригинальный и подход к построению его интерфейса мне очень зашёл.

#css #tailwind #motion #animation #ui

#заметка дня

Тут в нашем чатике aka @htmlshitchat человек задал вопрос: «Как заставить событие произойти только после долгого нажатия на кнопку?»

И, вроде, очевидный ответ: ставь таймаут да отменяй его:

Осторожно, псевдокод jQuery

let r = null;

$button.on("mousedown", function(e) {
  e.preventDefault();
  e.stopPropagation();
  r = window.setTimeout(function() {
    $button.html('Clicked');
  }, 3000);
});

$button.on("mouseup", function() {
  $button.html('Hold me');
  window.clearTimeout(r);
});

Но это было бы скучно и недостаточно для поста, не правда ли?

И тут я вспомнил, что в 2017 году уже делал нечто подобное. Тогда не обошлось без погружения в Three.js и математику шестиугольников. Я об этом уже рассказывал: https://t.me/htmlshit/2639

Немного покопавшись в вебархиве, я нашёл тот проект. Итак, что же мы делали?

А вот на видео видно.

Анимация была оформлена на Tween.js, который всё ещё очень и очень популярен. Правда, название их последнего релиза ну прям удручает. End of the end — серьёзно?

С 2017 года API их, конечно же, поменялся. Мне хотелось одновременно и последний вариант API вам показать, и сетку заставить работать... как хорошо, что мы в вебе, где можно вообще всё!

Итак, кодпен: https://codepen.io/alinaki/pen/KwPwVPr?editors=1100

Весь современный код упихан в секцию с HTML, в script type="module", где импортированы нужные модули и константы из ESM-версии Tween.js, он же является нашим скоупом.

Это вообще очень удобный паттерн чтобы быстро накидать пример без бандлинга.

По зажатию кнопки мыши запускаем анимацию forward, по отпусканию кнопки — запускаем reverse. Из breaking changes — раньше можно было просто вызвать start(), а теперь нужно вызывать startFromCurrentValues(), иначе красоты не получится.

  function forward() {
    tween.stop().to({
      value: 2000
    }, 3000).startFromCurrentValues();
  }

  function reverse() {
    tween.stop().to({
      value: 1000
    }, 3000).startFromCurrentValues();
  }

Достаточно просто и эффектно.

#js #animation #tween