Анимация при скролле. Как создавать такие анимации?

Question

[Самвел Арутюнян]

Здравствуйте. Мучает вопрос с анимацией(примеры ниже), никак не могу найти в интернете, может неправильно ищу. Мне никак не понятно каким образом всё это работает, я и js код посмотрел, кое что еле еле понял, не всё понятно было. Может есть руководство, ну, типо алгоритм создания таких анимаций.

1. Анимация при скролле. Такое ощущение что сайт не скролится, но на самом деле всё происходит при скроле страницы.
andrikanich.guru/freelance/2017/hranipex - второй блок, так же блок "ШИРОКИЕ
ВОЗМОЖНОСТИ"

2. И ещё интересует вот такая линия SVG, как примерно такое получают?
andrikanich.guru/freelance/2019/iliotek/home.html - третий блок

Comments

[jamtuson]

Первое - https://scrollmagic.io/ , но на сайте автор иначе делал.
Второе рассказываю логику:
1.Рисуете линии
2. Задаете обводку и сдвиг обводки на всю длину линии. dasharray, dashoffset
3. При скролле подгоняете тайминг и изменяете сдвиг обводки к нулю.

[Самвел Арутюнян]

jamtuson, спасибо за ответ.
А по вашему, в первом варианте, автор сделал лучше? Или стоит не утруждать себя и всё же использовать плагин?

[jamtuson]

Самвел Арутюнян, можно было сделать лучше.
Используйте scrollmagic, если пилите сайт для клиента, чтоб в будущем не разбирались в сомнительном коде те, кто будут его поддерживать.

А для себя да, стоит поковырять, но не jq, а rAF.

[Самвел Арутюнян]

jamtuson, большое спасибо за ответ.

Answer 1

[Sashqa]

по 1 - https://scrollmagic.io/
по 2 - можно посмотреть на самом сайте в main.js как реализовано

Comments

[Самвел Арутюнян]

Сайт не работает, никак не могу смотреть что там :( По крайней мере спасибо за ответ.

[Sashqa]

Самвел Арутюнян, погугли scrollmagic