Рисование SVG c привязкой к прокрутке страниц. Как это проще реализовать?

Question

[MirageFFF]

Вот как на этом сайте, transparallels.ru только мне нужно пунктирную и чтоб заканчивалась в нужном месте, а как только колесико крутится, то она опять начинает плавно двигаться.

думаю как-то использовать этот плагин.
Просто мне нужно на всю страницу лендинга.
Кто делал такое, подскажите как лучше сделать.

Answer 1

[Антон Мудренок]

Самое универсальное решение в таком типе задача это GSAP(DrawSVG plugin) + Scrollmagic.
https://greensock.com/drawSVG
scrollmagic.io

Но так, как на сайте, можно сделать вообще через CSS анимации с transition. Там нет плавной прорисовки по скроллу, там идет запуск анимации от позиции скролла.
Самый попсовый туториал как вообще анимировать svg path:
https://css-tricks.com/svg-line-animation-works/
Ловить позицию можно просто без библиотек через scrollY, или опять же с Scrollmagic.

Comments

[MirageFFF]

Спасибо, попробую. Нашел вот такой инструмент lazylinepainter.info, но не могу позиционировать элемент, но думаю разберусь )