DNaoures

@PointC, @Cassie thanks a lot your answers ! It's perfect !! Have a good day ! David

Hello everybody An idea to generate (from a basic path) and animate this kind of arrows (with chevrons) ? https://dribbble.com/shots/3996538-Flow-Diagram-for-Geetest-Identity-Verification/attachments/10139114?mode=media Thanks a lot for your help !!

Hi Carl, thanks a lot ! Your explanation is perfect ! David

Hello everybody, i've a SVG file with lot of objects and I want to animate them in a Timeline. These objects can be complex (a group with 2 or 3 shapes and paths) and i want create a function for each type of object (arrow, people, explanation,...) and call function in a timeline (with object in parameter). For exemple, a arrow object : <g id="fleche2"> <g> <path class="st0" d="M56,237.5v43v31v23v53c0,5.5,4.4,10,9.9,10h87.9c5.4,0,9.9-4.5,9.9-10v-97c0-5.5,4.4-10,9.9-10h116.5"/> <g> <polygon class="st1" points="287.3,276.8 288.9,280.5 287.3,284.2 296,280.5 "/> </g> </g> </g> To animate the arrows, I use this function (with 2 parameters : arrow id and rotation angle) : function animeArrow(flecheInput,angle){ var fleche=flecheInput var arrow = fleche.find('path') var arrowHead = fleche.find ('polygon') var motionPath = MorphSVGPlugin.pathDataToBezier(arrow, {align:arrowHead}); TweenLite.set(arrowHead, {xPercent:-50, yPercent:-50, transformOrigin:"center center"}); TweenLite.to(arrowHead, 15, {bezier:{values:motionPath, type:"cubic", autoRotate: angle}}); TweenMax.fromTo(arrow, 15 , {drawSVG: '0% 0%'}, {drawSVG: '0 100%'}) } and to set it in a timeline : var tl = new TimelineMax(); tl .call(animeArrow,[($("#fleche1")),270],this, 1) .call(animeArrow,[($("#fleche2")),0],this, 15) .call(animeArrow,[($("#fleche3")),90],this, 30) .call(animeArrow,[($("#fleche4")),180],this, 45) .add( function(){ console.log( this.progress() ) } ) .call(animeArrow,[($("#fleche5")),45],this, 50) This option works well but i'm not sure if it's the best way to manage Timeline (play, reverse, progress) and I must put manually the delay for each arrow. And to add and manage other animation in this timeline, it's not easy... Have you some ideas or example to improve my option ? Thanks a lot !

Very thanks for your demo ! With DrawSVG plugin to draw line, it's perfect !! thanks again !

I think i've found the solution in this example : http://codepen.io/dipscom/pen/GZPoYz I test it now...

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 !

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 : http://codepen.io/anon/pen/CDHoB