Как сделать анимацию линии svg во всю высоту страницы при прокрутке?

Question

[Алексей Иванов]

Всем доброго времени суток! Знающие люди, подскажите пожалуйста, как сделать такую анимацию Пример. Или в каком направлении копать? При скролле страницы сделал появление, исчезновение svg при помощи TweenMax и ScrollMagic библиотек, но вот анимацию линии под 45 град. от начала до конца страницы не пойму как сделать. Посоветуйте где искать, всем спасибо.

Answer 1

[Aleksey Solovyev]

Вот блок, который отвечает за анимацию линий:

<div id="bg" class="" style="width: 100%; height: 7926.44px;">
  	<canvas id="mainBgC" width="1120" height="806" style="width: 1120px; height: 806px;"></canvas>
	<canvas id="shinesBgC" width="1120" height="806" style="width: 1120px; height: 806px;"></canvas>
        <canvas id="animationC" width="1120" height="806" style="width: 1120px; height: 806px;"></canvas>
</div>

Как видно из html, тут не используется inline-svg. Поэтому Ваш подход изначально неправильный...

Но если Вы хотите сделать такую линию на svg(тут будет мое имхо, которое не самое правильное(ибо это мазохизм такое делать так)), то я бы нарисовал всю svg-линию, которую поместил бы в div, который будет 100x100 вьюпорта(наверно нужно будет враппер какой-то). Спрятал бы svg (dashoffset etc). Отлавливаем скролл. Двигаем div в нужном направлении/ параллельно отрисовывая svg.
Сразу можно сказать , что у Вас будут проблемы с адаптивностью(можно решить... но такое...) и fps

А теперь как делают "нормальные ребята":
Рисуем все в canvas. Полный контроль над всем. Никаких проблем с адаптивностью + 60 fps

На данном сайте они вродь сами все js'ом рисовали в канвасе(анимировали gsap'ом) , но проще будет использовать PIXIjs или ThreeJS

Comments

[Алексей Иванов]

Спасибо, ещё раз!

Answer 2

[Андрей]

Да скорее всего джавиком реализовано. Если библиотека - то наверное можно найти в коде, но возможно самопис.

Прошу кстати обратить внимание (по крайней мере мне на ретина дисплее это отчетливо видно) на край, срез линии. Мое предположение:

• линия нарисованна "от и до"
  
• анимируется маска (достаточно clip path) при скроле - именно она тогда так обрубает, противоестественно для svg'шных линий
  

Судя по тому как заканчивается скролл - так оно и есть. Если это так - то самая простая реализация - прикрутить (fixed) маску с нужной высотой, к футеру, и применять ее только к этой линии.