Как узнать дошла ли заливка в svg до элемента?

Доброго времени суток. Вопрос не простой, но может кто шарит в плагинах Scrollmagic + GSAP и подскажет, буду очень благодарен. Собственно есть вот такие секции с линиями, которые заливаются с помощью svg свойства stroke через js:

Вычисляю длину свг линии функцией:

function pathPrepare ($el) {
        var lineLength = $el[0].getTotalLength();
        $el.css("stroke-dasharray", lineLength);
        $el.css("stroke-dashoffset", lineLength);
    }

Далее обрабатываю вышеуказанными плагинами (заливаю вычисленную длину с конца до 0 по скроллу):

// Init ScrollMagic
    var ctrl = new ScrollMagic.Controller({
        globalSceneOptions: {
            triggerHook: 0,
            tweenChanges: true,
            duration: ScreenHeight
        }
    });

    // Create scene
    $("section").each(function(){

        new ScrollMagic.Scene({
            triggerElement: this
        })
            .setPin(this)
            .addTo(ctrl);

    });

    var processLine = '#process-line';

    // prepare SVG
    pathPrepare($(processLine));

    var s4Tween = new TimelineMax();
    s4Tween.to($(processLine), 1, {strokeDashoffset: 0, ease:Linear.easeNone})
        .add(TweenMax.to(processLine, 0, {stroke: "#3495d1", ease:Linear.easeNone}), 0);

    // Create scene
    var scene4 = new ScrollMagic.Scene({
        triggerElement: "#section3"
    })
        .setTween(s4Tween)
        .addIndicators({name: "1 (duration: svg)"})
        .addTo(ctrl);

Все бы хорошо, но я не могу никак сделать чтобы при дохождении заливки до какого нибудь элемента показывать его (он изначально скрыт, например). Элементы наложены абсолютом поверх линии и собственно никак с ней не связанны, кроме того, что они находятся в одной сцене scrollmagic. Может там есть в этом плагине есть функция какая-то, не могу понять как сделать. Вот на этом примере так работает на пункте меню Features и Our process.