ScrollMagic에서 트윈 결합하기

Question

두 개의 스크립트를 사용하여 Scrollmagic을 사용하여 두 개의 SVG 애니메이션을 만들지 만 코드는 중복되고 반복됩니다. 하나의 스크립트로 모든 것을 결합하여 더 깔끔하고 효율적으로 만들 수있는 방법이 있습니까? 고맙습니다. 당신은 기본적으로이 너무 변수와 함수가 중복되지처럼 뭔가를 할 수

<script> 
// START of animation 1 

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

var $animation1 = $("path#animation1"); 
pathPrepare($animation1); 
var tween = new TimelineMax() 
.add(TweenMax.to($animation1, 3, {strokeDashoffset: 0, ease:Linear.easeNone})) 

var scene = new ScrollMagic.Scene({triggerElement: "#animationonediv", duration: 300, tweenChanges: true}) 
.setTween(tween) 
.addTo(controller); 

</script> 

<script> 
// START of animation 2, which is in essence a copy of the previous code 

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

var $animation1 = $("path#animation2"); 
pathPrepare($animation2); 
var tween = new TimelineMax() 
.add(TweenMax.to($animation2, 3, {strokeDashoffset: 0, ease:Linear.easeNone})) 

var scene = new ScrollMagic.Scene({triggerElement: "#animationtwodiv", duration: 300, tweenChanges: true}) 
.setTween(tween) 
.addTo(controller); 

</script> 

Answer 1

: 내가 사용하고 코드는 다음과 같은 것입니다

<script> 
    // START of animation 1 
    function pathPrepare ($el) { 
     var lineLength = $el[0].getTotalLength(); 
     $el.css("stroke-dasharray", lineLength); 
     $el.css("stroke-dashoffset", lineLength); 
     } 

    var $animation1 = $("path#animation1"); 
    pathPrepare($animation1); 
    var tween = new TimelineMax() 
    .add(TweenMax.to($animation1, 3, {strokeDashoffset: 0, ease:Linear.easeNone})) 

    var scene = new ScrollMagic.Scene({triggerElement: "#animationonediv", duration: 300, tweenChanges: true}) 
    .setTween(tween) 
    .addTo(controller); 

    var $animation2 = $("path#animation2"); 
    pathPrepare($animation2); 
    var tween2 = new TimelineMax() 
    .add(TweenMax.to($animation2, 3, {strokeDashoffset: 0, ease:Linear.easeNone})) 

    var scene2 = new ScrollMagic.Scene({triggerElement: "#animationtwodiv", duration: 300, tweenChanges: true}) 
    .setTween(tween2) 
    .addTo(controller); 
</script>