[Adding multiple (same) element animations to a SVG]

That’s awesome thanks for the suggestions...

[My car is driving backwards! Flipping object on MotionPath]

Thanks for that ... @mikel I didn’t realize you could use scale -3 in this way so that’s definitely useful to know,  and @ZachSaucier yes I’ll have to pay much more attention to how paths are actually created before animating...

[Adding multiple (same) element animations to a SVG]

So, I've got a SVG image of a landscape which will have a bunch of different animations happening in the background. One of these is a group of about 5-6 cows with flicking tails. These are all exactly the same, but with staggered tail flicks ..my question is - is the best approach here to just have separate cows in the html, all with different IDs (and tail IDs) and separate timeline functions for each - or is there a smarter way to approach it??  Thanks in advance for any suggestions

See the Pen RwrRzBG by nickjacobsnz (@nickjacobsnz) on CodePen

[My car is driving backwards! Flipping object on MotionPath]

Thanks Mikel,  the alignment issue makes more sense:

For the flipping of the car once its starts animating - I've fixed it by using "scaleY:-1,scaleY:-1" - I'm just trying to understand WHY that happens...?

[My car is driving backwards! Flipping object on MotionPath]

Ok, I'm a few days into playing around with gsap, and starting to really love it... getting stuck on a few things  - here are a couple I'd appreciate some help with...

I have an object on a path, but when I animate it, its upside down - I've tried a few things like trying to rotate in the .set() but that doesn't seem to work...is this something I can do in gsap, or should I do it elsewhere (css?).

 

 

 

 

The second question is about align:"self" using motionPath - I've read the docs and posts but still can't get my head around it - if I do the same animation, but with align:"self" I'm driving off the road - is "self" the path, or something else?

 

See the Pen wvMWMWY by nickjacobsnz (@nickjacobsnz) on CodePen

 

Thanks again:)

 

See the Pen abdZdmZ by nickjacobsnz (@nickjacobsnz) on CodePen

[Animating dashed line]

I feel like I'm contributing when I answer my own questions  haha.

I did find this tip from @PointC which was a quick Illustrator fix without having to code 2 sets of line animations:

"Quick tip: when you create your path, place a temporary arrowhead on the beginning of it via the stroke panel in your vector software. If the direction is incorrect, you can easily reverse it. In Adobe Illustrator you do that by the menu Object --> Path --> Reverse Path Direction. Once it's going in the desired direction, simply remove the arrowhead and export."

[Animating dashed line]

OK, I do have one more question on animating lines

 

So, I've found that some of the animation is  moving the wrong way when I animate the  strokeDashOffset - is there any easy way to fix this other than going back and redrawing in illustrator, or doing something like I've done here - a separate .reversed animation:

 

See the Pen oNbxoGx by nickjacobsnz (@nickjacobsnz) on CodePen

 

 

 

[Animating dashed line]

OK, I don't blame you for not understanding - it wasn't very clear, and in fact I was just confusing myself by not reading the code properly  

 

So, just to tidy up without the rest of the guff, and just focus on the line, this is the exact answer you gave and what I needed

 

See the Pen LYGGXJx by nickjacobsnz (@nickjacobsnz) on CodePen

 

 

[Animating dashed line]

Just as an aside... I bought this into svgator with the water as solid (undashed) lines, which the tool has obviously converted into lots of ellipse paths... is there any way or advantage of doing this in GSAP? Ie animating a solid path into dashes rather than animating lots of paths of existing dashes? 

[Animating dashed line]

That’s awesome thanks Zach! Amazing how hard it is to find something when you don’t quite know what to search for :) ... this forum looks to be super helpful and responsive! Thanks again

[Animating dashed line]

Luckily started reading the svg gotchas thread and found this:

https://greensock.com/forums/topic/13681-svg-gotchas/?do=findComment&comment=57942 
 

hopefully can make something like this work...

[Animating dashed line]

I did this as a quick mockup using svgator, and now need to incorporate a few objects which have these moving dashed lines into a gsap project - (first project so please bear with :)) Is this possible to do in gsap (the moving dashed line) - and can someone please point me in the right direction...?

See the Pen gOPavjW by nickjacobsnz (@nickjacobsnz) on CodePen