Я создаю одностраничное приложение для электронной коммерции. Страница товаров основана на карточках в адаптивной сетке. Я хочу создать карточку, чтобы развернуть onClick в полноэкранный режим с помощью анимации типа spring или ease, чтобы увидеть полную страницу продукта.
Проблема в том, что карта привязана к сетке и не всегда в центре. И все, что я пытался сделать с css анимацией, выглядело ужасно с точки зрения анимации и ощущалось как велосипед с точки зрения кода.
Я просто хотел спросить, как вкратце лучший способ добиться этого, какой путь я должен выбрать? И действительно ли это возможно с сеткой, которая у меня есть сейчас, или я должен попробовать что-то другое? Я думал об использовании Framer Motion в качестве библиотеки анимации.
Здесь вы можете увидеть что-то похожее на то, что я хочу достичь: https://youtu.be/XyBbFMhMtik?t=10
А вот упрощенное коды и ящик из того, что у меня есть сейчас: https://codesandbox.io/s/dank-water-o2lpp
Образец