Comment faire pour inverser un SVG horizontalement en utilisant TweenMax (Greensock)?

Question

J'essaye de faire de l'animation en utilisant Greensock et le reste est correct, sauf que je ne suis pas sûr de savoir comment retourner le SVG comme je le voudrais.

j'ai fait le code comme ceci:

.to($tri_yellowgreen, 0.25, {rotationY:180, transformOrigin:"left top"}) 

..mais la flèche se déplace vers le bas et non flip sur la même position.

CODEPEN DEMO: http://codepen.io/anon/pen/eJOBma

J'aimerais passer de ceci:

... à ce (la flèche jaune-vert renversé):

Answer 1

Je pense que la solution pourrait être de remplacer ceci:

.to($tri_yellowgreen, 0.25, {rotationY:180, transformOrigin:"left top"}) 

avec qui:

.fromTo($tri_yellowgreen, 0.25, {transformOrigin:'right top'}, {rotationY: 180}) 

Fondamentalement, le transformOrigin doit être appliqué avant l'interpolation commence même, d'où l'utilisation de .fromTo() méthode au lieu d'un appel .to().