Заметки про React
Ссылка
нажмите — покажем
нажмите — покажем
Вам все еще нужен Framer Motion?
Мэтт Перри, автор библиотеки Framer Motion, в своем блоге поделился о новых фичах в CSS. Благодаря этим фичам возможно вам больше не понадобится библиотека Framer Motion.
Автор сравнил популярные виды анимаций в Framer Motion и как их можно реализовать через CSS:
- Вводная анимация. Чтобы сделать анимацию при появлении элемента в документе или при загрузке страницы, можно использовать CSS правило @starting-style. Это правило определяет первоначальные стили, из которых элемент будет анимироваться:
#my-element {
opacity: 1;
transition: opacity 0.5s;
@starting-style {
opacity: 0;
}
}
- Независимая трансформация. Появятся свойства translate, scale и rotate для независимой трансформации элемента.
button {
translate: 0px 0px;
transition:
translate 0.2s ease-out,
scale 0.5s ease-in-out;
}
button:hover {
scale: 1.2;
}
- Spring анимация. Для создания spring анимации можно использовать CSS функцию linear(). Функция принимает серию точек и линейно интерполирует между ними. Чтобы не писать серию точек вручную, используйте онлайн генераторы функции linear().
- Анимация по скроллу. В CSS появились две timeline анимации scroll() и view(). Их можно назначить в свойство animation-timeline для управления анимацией посредством скролла, а не времени:
div {
animation-name: fadeAnimation;
animation-timeline: scroll();
}
- Бонус, анимация высоты. В CSS нет возможности анимировать в/из auto, но CSS5 функция calc-size позволит это сделать:
li {
height: 0px;
transition: height 0.3s ease-out;
.open {
height: calc-size(auto);
}
}
https://motion.dev/blog/do-you-still-need-framer-motion
118 · 3.8K ·