gasp doesent work on safari

Question

anyone help me why this doesen't wrok on safari? it works great on chrome. the js script works on firefox also but with some svg problems which doesnt appear in their right position but thats another issue... in safari in the debugger tab i get this:

http://codepen.io/Separator/pen/dGEdeP

below is my js code using GASP

$(document).ready(function ($) {



    // define the main controller for ScrollMagic (note we can have multiple controllers if needed)
    controller = new ScrollMagic.Controller({
        globalSceneOptions: {

            triggerHook: 0
        }
    });



    // animacionet e perseritura pas hyrjes/////////////////////////////

    var tweensaturni = TweenMax.to("#saturni", 100, {rotation: 360, ease: Linear.easeOut, transformOrigin:'50% 50%', repeat:-1,force3D:true})

    var tweenplutoni = TweenMax.to("#plutoni", 30, {rotation: 360, ease: Linear.easeOut, transformOrigin:'50% 50%', repeat:-1,force3D:true})

    var tweenraketa = TweenMax.to("#raketa", 0.05, {y:'+=4',
  repeat:-1, yoyo:true,force3D:true})

    var tweenzjarri = TweenMax.to(".st2", 0.1, {scale:0.8,
  repeat:-1,force3D:true})


    var tweensateliti = TweenMax.to("#sateliti", 20, { rotation:360,
  transformOrigin:'50% 150%', repeat:-1,force3D:true} )
//////////////////////////////////////////////
// start a new ScrollMagic scene by calling the provided method from the ScrollMagic Class
new ScrollMagic.Scene({
    triggerElement: '#komplet',
    duration: '800%'//(duration - window.innerHeight)
})

.setTween(new TimelineMax().add([



    // animacionet e hyrjeve


    TweenMax.staggerTo('#yjet', 5, {autoAlpha: 1, ease: Back.easeOut}, 5),
    TweenMax.staggerTo('#sateliti', 1, {autoAlpha: 1, ease: Back.easeOut, delay:1, y:-100,force3D:true}, 0.15),
    TweenMax.staggerTo('#saturni', 1, {autoAlpha: 1, ease: Back.easeOut, delay:2, y:-100,force3D:true}, 0.15),
    TweenMax.staggerTo('#plutoni', 1, {autoAlpha: 1, ease: Back.easeOut, delay:3, y:-100,force3D:true}, 0.15),
    TweenMax.staggerTo('#raketa', 1, {autoAlpha: 1, ease: Back.easeOut, delay:4, x:-200,force3D:true}, 0.15),
    TweenMax.staggerTo('#text1', 3, {autoAlpha: 1, force3D:true, ease: Back.easeOut, delay:5, y:-50}, 0.15),
    TweenMax.staggerTo('#text2', 3, {autoAlpha: 1, force3D:true, ease: Back.easeOut, delay:5, y:-50}, 0.15)
 ]))

.setPin("#komplet")


.addIndicators({name:'sdklfjsdf'})


.addTo(controller);


    ////////////// SHKRIMI









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

    var $shkrimi = $("path#shkrimi");
    var $vija = $("path#vija");


    // prepare SVG
    pathPrepare($shkrimi);
    pathPrepare($vija);




    var tweenshkrimi = new TimelineMax()
        .add(TweenMax.to($shkrimi, 0.9, {strokeDashoffset: 3450, ease:Linear.easeNone,force3D:true})) 
        .add(TweenMax.to($vija, 0.1, {strokeDashoffset: 0, ease:Linear.easeNone,force3D:true}))  
        //.add(TweenMax.to("#pluto", 1, {stroke: "#fff", ease:Linear.easeNone}), 0);            

    // build scene
    var scene2 = new ScrollMagic.Scene({triggerElement: "#pluto", duration: 5400, tweenChanges: true})
                    .setTween(tweenshkrimi)
                    .setPin("#pluto")
                    .addTo(scene2)
                    .addIndicators({name:"shkrimi"}) 
                    .addTo(controller);



    /////////////////Pjesa2 //////////////////////




     controller2 = new ScrollMagic.Controller({

    });




    var tweensaturni2 = TweenMax.to("#saturni2", 10, {rotation: 360, ease: Linear.easeOut, transformOrigin:'50% 50%', repeat:-1,force3D:true})

    var tweenastronaut1 = TweenMax.to("#astronaut1", 50, {rotation: 360, ease: Linear.easeOut, transformOrigin:'50% 70%', repeat:-1,force3D:true})

    var tweenastronaut2 = TweenMax.to("#astronaut2", 80, {rotation:'360_ccw', ease: Linear.easeOut, transformOrigin:'50% 100%', repeat:-1,force3D:true,})





    new ScrollMagic.Scene({
    triggerElement: '#pjesa2',
    duration: $('#pjesa2').height(),

        triggerHook:'onLeave', offset:300, reverse: true,
})

.setTween(new TimelineMax().add([


    TweenMax.to('body', 1, {backgroundColor: '#41c4b2'}), 

        TweenMax.staggerTo('#saturni2', 0.3, {autoAlpha: 1, ease: Back.easeOut, y:-100, force3D:true,}, 1),
        TweenMax.staggerTo('#astromjegullat', 0.3, {autoAlpha: 1, delay:0.1, ease: Back.easeOut, y:-200, x:-100, scale:'0.8%', force3D:true,}, 1),

        TweenMax.staggerTo('#astronaut1', 0.3, {autoAlpha: 1, delay:0.2, ease: Back.easeOut, y:-100, x:100, scale:'0.8%', force3D:true,}, 1),

        TweenMax.staggerTo('#astronaut2', 0.3, {autoAlpha: 1, delay:0.3, ease: Back.easeOut, y:-150, x:0, scale:'0.8%', force3D:true,}, 1),

    ]))
    .setPin("#pjesa2")

   .addIndicators({name:'pjesa2'})


.addTo(controller2); 




    });