Как реализовать анимацию сужения блока?

Question

[Руслан Дасаев]

Здравствуйте, коллеги! Какие ваши предложения по выполнению следующей задачи:
тут gif-ка нажимаете сверху справа на три точки - открыть оригинал
Есть 1 экран сайта,

с которого мы скроллим вниз до 2го экрана и подчеркнутого маркером элемента внутри него.

Дальнейший скролл вниз активирует анимацию, якобы сужения белого фона 2го экрана со всех сторон по направлению к белой карточке в картинке снизу.

А вот как выглядел бы второй экран по дефолту, если отключить анимацию

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

Comments

[Максим]

со слов не ясно, покажите пример, где вывидели подобное

[Руслан Дасаев]

Максим Ленский, тут gif-ка

[Максим]

Руслан Дасаев, там ни чего не происходит же ... просто статичная картинка

[Руслан Дасаев]

Максим Ленский, нажимаете сверху справа на три точки, потом - открыть оригинал

[Максим]

Руслан Дасаев, https://codepen.io/topicstarter/pen/YzNoLRd - так ?

[Руслан Дасаев]

Максим Ленский, Спасибо, посмотрю на досуге - интересное решение. Сделал как в первом ответе.

Answer 1

[RAX7]

расстояние от боков карточки до боков экрана может отличаться

Если карточка лежит в контейнере-центровщике, то расстояние до краев вьюпорта можно посчитать как 50vw - 50%. В этом случае нужно еще учесть ширину скроллбара, которую придется определять в js.

Comments

[Руслан Дасаев]

В safari с префиксами не работает. Есть соображения, как пофиксить?

[RAX7]

Руслан Дасаев, переписать без использования clip-path. Можно у псевдоэлемента анимировать top/left/rigth/bottom по той же формуле. Но тогда анимация будет не плавная.