Вам все еще нужен 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