GSAP. Как изменять zIndex на определённых точках Path?

Question

[Влад]

Всем привет. Собственно говоря, задача такая. Есть горизонтальный текст, который будет огибать некий объект по скроллу.

Получается, что на крайних нижних точках zIndex перемещающегося элемента будет равен -1, а на верхних точка он наоборот становится больше зединдекса текста.



Как решить эту задачу?

Плагины:
https://greensock.com/scrolltrigger/
https://greensock.com/motionpath/

Спасибо.

Answer 1

[profesor08]

Никак, установи заранее z-index для букв, обернув каждую в свой тег.

Comments

[Влад]

Думаешь, что только в упор? Жалко, я думал может быть всё таки есть решение:(

[profesor08]

Влад, path это один элемент, он не может быть одновременно сверху и снизу. Можешь разделить не несколько более коротких кусков, но тогда придется упороться с анимациями, их синхронизацией.

[Влад]

profesor08, Короче, я тогда накидаю на JS код:
- разбить строку в текстовом блоке на буквы
- пройтись циклом и обернуть в свой контейнер каждую букву.
- чётным и нечётным присвоить разные зед-индексы
- ну и перезаписать в основной контейнер.

Другого алгоритма не вижу в таком случае.

[Одиночка Айс]

Влад, чет нечет уже не подходит))

[profesor08]

Влад, вручную оберни нужные буквы и не надо алгоритмов городить. Если текст постоянно меняется, вот прям постоянно, то лучше его со стороны бэкенда готовить и оборачивать только нужны буквы вручную.

Answer 2

[Ivan Bogachev]

Можно продублировать SVG и "верхнюю" копию частично скрыть маской. Это не самое универсальное решение, но в контексте задачи может быть самым простым и надежным, т.к. не будет никакой привязки к контенту, только к структуре кривой:

Comments

[Влад]

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

[Ivan Bogachev]

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

свойств много таких, которые я вообще вижу первый раз в жизни ))

Ну это уже другой вопрос :-)

Answer 3

[Александр Васильев]

GSAP. Как изменять zIndex на определённых точках Path?
Всем привет. Собственно говоря, задача такая. Есть горизонтальный текст, который будет огибать некий объект по скроллу.

Получается, что на крайних нижних точках zIndex перемещающегося элемента будет равен -1, а на верхних точка он наоборот становится больше зединдекса текста.

либо js
либо использовать под себя известные библиотеки