Animation de Chevron avec Greensock

Question

Donc j'essaye d'animer un Chevron en utilisant la Bibliothèque Greensock. Mon but est de faire

Pour en:

j'ai une version de travail sur Codepen https://www.codepen.io/Brushel/pen/boryZP je cible l'id de Chevron et j'ai un écouteur petit événement attaché à l'aide de la fonction de la MorphSVG . Cependant, je veux chevron pour animer du point le plus bas et animer lentement. En ce moment, il suffit de changer les coordonnées SVG sur le clic.

Voici le code:

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

On dirait que vous aviez un CSS transformons appliqué que certains navigateurs donner la priorité sur l'attribut « transformer », mais l'attribut « transformer » est beaucoup plus cohérent à travers les navigateurs. C'est pourquoi GSAP l'utilise. Ainsi, dans votre exemple, vous avez eu un conflit où la transformation CSS remplaçait celle appliquée dans l'attribut.

Vous devez toujours définir directement les valeurs liées à la transformation via GSAP pour garantir la compatibilité entre les navigateurs.

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

Voici un codepen révisé qui utilise également un shapeIndex pour changer la façon dont la forme se transforme - est que ce que vous cherchez? https://codepen.io/GreenSock/pen/3bf8c2aec6c2171d158bdf13bff33525/