Настройка области фиксации объекта. Это та область экрана, (верх, центр, низ) относительно которой стартует эффект фиксирования. Обратите внимание, формы на примере залипают в центре экрана.

Это точка начала фиксации объекта относительно выбранного Window Top / Window Center / Window Bottom.

Это расстояние в пикселях, которое должен пройти объект в режиме фиксации.

1. Добавьте на страницу Zero Block из библиотеки блоков и перейдите в редактирование блока. Поместите 2 объекта в рабочую облаcть, по вертикали, друг за другом.

2. Объектам задайте одинаковую область фиксации. Мы установили WINDOW CENTER. Оба объекта фиксируются посередине экрана.

3. Лучше сразу выбрать конечный размер всех элементов и расстояние между ними. Размер каждого из них повлияет на параметры анимации.

1. Начнем с настройки Trigger offset / Точки начала анимации.

Точка отсчитывается относительно выбранной нами области, Window center.

Начните с верхнего объекта. Так удобнее рассчитать точки начала анимации для остальных. У него точка начала анимации точка равна 0px. Это значит, что первый объект залипнет точно по центру экрана.

Нижний объект должен залипнуть когда коснется верхнего. Это значит, что его точка начала анимации будет ниже на высоту первого объекта. Ставим отступ100px.

2. Настроим Distance / Дистанцию.

Это то расстояние, которое должен пройти объект в режиие фиксирования. Начните настройку анимации с нижнего объекта. Так вам будет удобнее рассчитать расстояние залипания.

Квадрат. Если еще раз взглянуть на пример, можно заметить, что в режиме фиксации квадрат не проходит никакого расстояния, а только фиксируется под кругом. Значит нам нужно поставить расстояние дистанции 0px.

Круг. Круг в режиме фиксации на экране проходит расстояние до квадрата. После этого эффект фиксации пропадает и обе фигуры скроллятся как обычно.

По сути, круг должен добраться до положения квадрата, но остановиться выше, чтобы зафиксироваться рядом.

Значит это 400px - 100px (высота квадрата) = 300px