Hello! I have some issue with show elements. I fill svg line with help property stroke:
function pathPrepare ($el) {
var lineLength = $el[0].getTotalLength();
$el.css("stroke-dasharray", lineLength);
$el.css("stroke-dashoffset", lineLength);
}
But I don`t know how can show element when fill before it (elements are hidden). They are conected only alike scene and they have absolut position. Maybe GSAP or Scrollmagic have some functions for decide this problem? Or maybe give me some hints.
My code:
// 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);