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

Question

[SerjAndreev]

Уже более недели сижу не могу сделать.
Как только попали в нужный блок по скролу начинается анимация,поэтапно по скролу прорисовуется сначала первая полоса белая потом с небольшим интервалом желтая.
Желтая останавливается на этапе выполнения.

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

Comments

[VegasChickiChicki]

Вы уже пробовали ,что у вас есть уже?
Я думаю что это можно реализовать с помощью Canvas. Рисуете вашу линию ,точнее описываете ее движение координатами ,она по ним вырисовывается ,потом поверх такую же ,только она уже будет вырисовываться от значения скоролла колесика.

[SerjAndreev]

VegasChickiChicki, ого,это жостко.

Answer 1

[Павел Волынцев]

Это может быть SVG с элементами-чекбоксами и белой линией, поверх которой отрисовывается жёлтая линия по вот такому сценарию: Scroll to draw



Вот пример похожий: le-mugs.com (см раздел La Carte) в работе и пример на codepen https://codepen.io/proweb1991/pen/GNxYaR