traummaschine

I wondered if anyone can help shed some light on how I might be able to shift the starting point of an SVG path which forms the shape of a rectangle. I'm aware it's more to do with the SVG file itself, but it's well illustrated using GSAP's DrawSVG plugin (see the codepen) Ideally, the vertical rectangle would have a bottom right starting point, and the horizontal rectangle a bottom left starting point. Both currently start at the top left. I tried flipping the paths in Illustrator before exporting the SVG and various other things, but got the same results as far as these rectangles go. Also tried a few things with tools like SVGOMG, but no joy. Many thanks in advance for any help! (and apologies if this has been covered elsewhere – I couldn't find a thread concerned with this here)

Superb - I hadn't encountered tweening counters before - thanks again!

Thanks so much for your help here. I actually managed to get something working as part of my ScrollMagic project like so: http://codepen.io/traummaschine/pen/BKpJJr This doesn't have the 'arrow' / pencil element yet (which I'm working on - and thinking I'll need the pathDatatoBezier function for, as you've both outlined above), and there's an extra element I'd like to add - a counter of sorts, which would count incrementally as the animation progresses. Ideally I'd be able to count from and to any given number (e.g. start at 15, end at 65), as opposed to the numbers being embedded graphically in a PNG or something. Any idea whether this would this be possible at all? I realise that this may all be too ScrollMagic-centric for this forum. Apologies if so. And thanks again for your help.

I'm very new to GSAP - just playing around with it alongside ScrollMagic - working great so far, enjoying seeing what it can do. I'm wondering if anyone could advise on the best method of 'drawing a line' with a PNG graphic (along an SVG path, if possible, as it needs to be responsive, and this seems to be the best route from what I've read) It's looking like the MorphSVGPlugin (possibly using .pathDataToBezier ?) or the DrawSVGPlugin may provide the answer. This is the effect I'm going for - the pencil element travels along the SVG path and reveals the line. This SVG path could be more complex that the one here! Apologies if this has been covered elsewhere - I did have a look through the forum, but couldn't find anything addressing this... any help much appreciated. Thanks in advance!