/*svg path çizim başla*/

// no-conflict her zaman gerekmeyecektir, proje gereği eklendi
var $x = jQuery.noConflict();

// svg hazırlama fonksiyonu
function pathPrepare($el) {
    var lineLength = $el[0].getTotalLength();
    $el.css("stroke-dasharray", lineLength);
    $el.css("stroke-dashoffset", lineLength);
} //svg toplam uzunluğunu al ve ardından stroke alt özelliklerine uygula; bu durumda index sayfasındaki svg nesnesine de aynı değerlerin initial olarak atanması gerekir

// değişkene svg path atama
var $word = $x("path#hat");

// svg hazırla
pathPrepare($word);

// scrollmagic controller'ı oluştur
var controller = new ScrollMagic.Controller();

// tween animasyonu ve yeni bir zaman tüneli tanımla
var tween = new TimelineMax()
    .add(TweenMax.to($word, 0.9, { strokeDashoffset: 0, ease: Linear.easeNone })) // çizim hızı 0.9
    .add(TweenMax.to("path", 1, { stroke: "#f7e4a5", ease: Linear.easeNone }), 0); // tüm svg'nin rengini çizim sırasında değiştirebiliriz

// sahneyi hazırla
var scene = new ScrollMagic.Scene({
    triggerElement: "#section6",
    duration: 4000,
    tweenChanges: true }) //duration, scroll yüksekliği ile eşit olmak zorunda
                .setTween(tween)
                //.addIndicators() // debug modu işaretçileri, sadece geliştirme aşamasında kullanın! (plug-in gerektirir)
                .addTo(controller);

/*svg path çizim bitir*/