Animate Illustrator Arrow

[DNaoures]

Hello Everybody, 
 
I've created an SVG file in Illustrator with arrows and export it as SVG.(see the .png file)
 
The arrows are exported like this :

<g id="arrow99">
 <g>
   <path class="st7" d="M105.7,33h107.2c2.5,0,4.6,2.1,4.6,4.6v32.8c0,2.5-2.1,4.6-4.6,4.6h-33.4"/>
   <g> <polygon points="175,75 181.4,72.4 179.9,75 181.4,77.6 "/></g>
 </g>
</g>

and I try to animate this arrow.
My problem is to position, at the beginning of animation,  the <polygon> (the end of the arrow) at the beginning of <path> with the right rotation.
 
Thanks a lot for your help (and sorry for my "poor" english  )
 
For your information, i use this method to animate path :  

See the Pen CDHoB by anon (@anon) on CodePen

[PointC]

Hi DNaoures 

 

Welcome to the GreenSock forum.

 

I'm not sure if you linked to the right CodePen because that demo just has three lines in it and none of them match the image you attached.

 

Since you're a Club member you have access to the DrawSVG and MorphSVG plugins which can handle this animation easily. You can use the DrawSVG plugin to animate the line and you can use the MorphSVGPlugin.pathDataToBezier() method to create a path for the arrowhead to follow. 

 

Please see this blog post for more information.

https://greensock.com/morphsvg-update

 

You can download those plugins from your dashboard. If you want to use them on CodePen, please see this demo to find the links for CodePen safe versions of the Club plugins.

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

 

Just an FYI - the demo you posted is using GSAP version 1.11 which is from 2013. You should be using the latest version (1.19.1) in your demos and projects.

 

Hopefully that gets you started.

 

Happy tweening.

[DNaoures]

Very thanks for your answer !

 

I use the MorphSVGPlugin.pathDataToBezier() method to create a path for the arrowhead.

It's ok but i have a litte problem, the arrowhead is not aligned with the path direction. (same problem with  autoRotate : true)

 

my js :

$(document).ready(function(){
    $("#schema").load("schema2.svg", function(d) {
      var tween,
      opacity = false,
      motionPath = MorphSVGPlugin.pathDataToBezier("#arrow", {align:"#arrowHead"});

      TweenLite.set("#arrowHead", {xPercent:-50, yPercent:-50});
      tween = TweenLite.to("#arrowHead", 6, {bezier:{values:motionPath, type:"cubic",autoRotate: false}});

    })


});

and my svg  file :

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">

.st7{fill:none;stroke:#000000;stroke-miterlimit:10;}
</style>

 <g id="fleche99">
  <g>
    <path id="arrow" class="st7" d="M105.7,33h107.2c2.5,0,4.6,2.1,4.6,4.6v32.8c0,2.5-2.1,4.6-4.6,4.6h-33.4"/>   
    <g><polygon id="arrowHead" points="175,75 181.4,72.4 179.9,75 181.4,77.6 "/></g>
  </g>
 </g>
</svg>

Thanks for your help ! 

[DNaoures]

I think i've found the solution in this example :

 

See the Pen GZPoYz by dipscom (@dipscom) on CodePen

 

 

I test it now...

[PointC]

Looks like you may have found a solution, but I made a quick demo from your code for you.

 

See the Pen 0344a47f9acd42c391484e7a52db2c6c by PointC (@PointC) on CodePen

 

Happy tweening.

[DNaoures]

Very thanks for your demo !

 

With DrawSVG plugin to draw line, it's perfect !!     

 

thanks again !