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

Question

[Иван Медведев]

Подскажите, как повторить анимацию, как в примере (скриншот блока с нужной анимацией)

Answer 1

[Alexander Bazhenov]

Воспользуйся библиотекой GSAP - https://greensock.com/ и подключи ее плагин ScrollTrigger. Оба инструмента бесплатные.
Пример нужной тебе реализации есть в официальных примерах здесь.
Параметр, который тебя интересует и влияет на прогресс анимации, это "scrub". Саму полосу можешь анимировать как и в примере с помощью scaleX (только не забудь указать привязку transformOrigin: 'left center'.

Для более сложных вещей, можешь найти в документации ScrollTrigger свойство onUpdate, где ты можешь напрямую отслеживать ход анимации.

Comments

[Иван Медведев]

Благодарю! Сейчас изучу.