2

Время анимации

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

Время анимации Дизайн, Figma, Дизайнер, Анимация, Видео, Без звука

Интересно, что сама карточка на сайте является изображением, поэтому кнопка там и не может быть кликабельной, кликабельная вся карточка. Это связано с тем, что пришлось бы сложнее прописывать поведение кнопки при ховере на карточку, так как не только кнопка увеличивается, но и весь текст. Если шрифт не отзывчивый, то может начать прыгать… короче, проще было перенести изображением в данном случае.

Но у меня Figma, делай что хочешь. Хотя и тут не обошлось без интересного момента, дело в том, что ховер любой карточки на сайте (через позиционирование) выводит элемент на передний план, создавая тени на объекты в линию слева и справа. В Figma не может такого быть (или я чего-то не знаю), чтобы два слоя оказались на одном уровне или тасовались во время анимации. Как ты их поставишь, так они и останутся. Следовательно, для демонстрации ховера, нужно сделать как в верхнем примере, а для макета нижний пример, с auto layout. Тень в верхнем списке падает на объекты слева и справа, так как фрейм находится наверху. С auto layout тень будет падать либо на объект слева, либо справа.