Exporting Follow Path SVGs with rotation

[pgilfernandez]

As you may already know, I'm very interested in animations for web. Since I met Friction (no much time ago) I've been exploring all possible features that Friction has to export SVGs (while encouraging you to include macOS builds, indeed, hehehe) and I'm both surprised on how well it works and the number of SVG features already included. My list may grow up but it's pretty impressive:

• translate
• rotate
• scale
• shear (skew)
• text effects
• mask
• text
• gradient animation
• stroke gradient
• expressions orbit
• expressions wiggle rotation
• expressions wiggle
• expressions loop
• visibility range
• dynamic shape
• scale
• rotation
• shadow
• blur
• visibility range
• opacity
• images
• blend mode
• rounded rectangle
• draw path
• path morph
• follow path no rotation
• follow path with rotation (coming soon?)

I'm creating examples for each of them and I'm planning to help you with the Docs, at least in this regard.
Well, this preface was to let you know how much I'm interested in using animation for web (animated SVG), not only for my projects but also for including Friction on my lessons (yes, I'm teacher at a Vocational High School about Graphic Arts).

My only "blocker" to feel that Friction is mostly fully featured now is the "rotation of the follow path" feature... So, I've been doing some research and I would like to help you finish it so that it is included in v1.0. It's about to see if my help is valuable and enough...
Let's get into it:

1. Indeed I've been digging into https://github.com/friction2d/friction/tree/svg-follow-path branch. Which successfully exports follow path elements. I just found a minor bug that I already reported somewhere
2. I'm still not very familiar with Friction code and C++ is not a coding language I personally like much, so it's being a little bit rough dive and understand the code
3. with that in mind I changed my approach and I was able to understand how the "rotate" feature works... it's dawn simple! So here is where I can help and, hopefully, it helps you figuring out how to implement it into Friction.

So, I just created 3 Friction projects (with some differences), exported them to SVG (using the svg-follow-path branch indeed), study the output code and created "manually" the right way to implement it. And here is why I'm writing all this much, I may found a pretty easy solution as the rotation feature per se is so simple to be applied to the <animateMotion> tag, a simple attribute with an auto value, that is, rotation="auto".
The tricky part are the "transform" matrices, as the object that follows the path must have an unique "transform" matrix. In case it's grouped and we are using few "transforms", the rotation="auto" attribute doesn't translate into an exact result.

Well, that is more or less my findings but you may understand it better by reading the SVG code in my examples:

name	exported from Friction	just adding auto to tag	--- fixed manually ----
example 1		-
example 2		-
example 3

Here are all the SVGs and .friction files: svg-follow-path.zip

I would suggest you to dig into the "example 3" first as it is the one that I think better shows the problem and the way to fix it...

I hope it helps or start with something that we can work with in order to be able to implement it =)
Cheers

[pgilfernandez]

Further "research": the rotate="auto" implementation works, but only in a specific scenario (that makes sense to me). Maybe it is that Friction let's you do things so flexible that, as in this case, could look like it's not working. So, if the path or group you want to make follow a path has 'translation', 'rotation', 'scale' and 'pivot set to 0 while connected to a path to follow, the animation works fine.

That is, following up there is a project that exports perfectly as it is without external modification:

project	_________ exported SVG _________
example_4.friction.zip

Cheers