Доброго времени суток. Вопрос не простой, но может кто шарит в плагинах
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.