Greensock으로 Chevron 애니메이션하기

Question

그래서 Greensock 라이브러리를 사용하여 Chevron에 애니메이션을 적용하려고합니다. 내 목표는에로

을하는 것입니다 :

I Codepen https://www.codepen.io/Brushel/pen/boryZP에 작업 버전 나는 갈매기의 id를 대상으로 그리고 난 조금 이벤트 리스너가 MorphSVG GS 기능을 사용하여 부착이있다 . 그러나, 나는 쉐브론을 사용하여 밑바닥부터 애니메이션을 만들고 천천히 움직이기를 원합니다. 바로 지금 클릭하면 SVG 좌표가 변경됩니다. 여기

코드입니다 : 당신이 CSS를 적용 변환 한 것처럼

var chevron = document.getElementById("chevron"); 
 

 
chevron.addEventListener('click', function(){ 
 
    TweenLite.to("#chevron", 0.08, { 
 
    morphSVG: "100,72.6 173.6,157.4 200,157.4 100,42.2 0,157.4 26.4,157.4" 
 
    }); 
 
});

.container { 
 
    max-width: 800px; 
 
    margin: 0 auto; 
 
} 
 

 
.st0{ 
 
    fill:#000; 
 
} 
 

 
#chevron { 
 
    transform: scale(.2); 
 
}

<div class="container"> 
 
<svg class="mo-icon__svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve"> 
 
    <g id="icon_x5F_chevron"> 
 
    <polygon class="st0" id="chevron" points="100,126.97715 26.4165,42.19543 0,42.19543 100,157.41371 200,42.19543 173.5835,42.19543 \t "/> 
 
    </g> 
 
    </svg> 
 
    </div>

Answer 1

그것은 일부 브라우저는 "변환"속성을 통해 우선 순위를하지만,이 "변환"하는 모습 속성은 많이 브라우저간에 일관성이 유지됩니다. 그것이 GSAP에서 사용하는 이유입니다. 따라서 귀하의 예에서는 CSS 변환이 속성에 적용된 것을 오버 라이딩하는 충돌이있었습니다.

브라우저와의 호환성을 위해 변환 관련 값을 GSAP을 통해 직접 설정해야합니다. 당신이 찾고 있던 무슨 즉 -

TweenLite.set("#chevron", {scale:0.2}); 

여기에 또한 모양 변경해 방식을 변경하기 위해 shapeIndex를 사용하는 수정 codepen이야? https://codepen.io/GreenSock/pen/3bf8c2aec6c2171d158bdf13bff33525/