Задать вопрос
@Dark19

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

Доброго времени суток. Вопрос не простой, но может кто шарит в плагинах Scrollmagic + GSAP и подскажет, буду очень благодарен. Собственно есть вот такие секции с линиями, которые заливаются с помощью svg свойства stroke через js:
4a43f516a0804484ae4f723de89755b1.png
Вычисляю длину свг линии функцией:
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.
  • Вопрос задан
  • 149 просмотров
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Rocket Смоленск
от 80 000 до 130 000 ₽
div. Ставрополь
от 40 000 до 90 000 ₽
Wanted. Санкт-Петербург
До 220 000 ₽
18 дек. 2024, в 16:42
2000 руб./за проект
18 дек. 2024, в 16:33
2000 руб./в час
18 дек. 2024, в 16:06
5000 руб./за проект