Rotation direction tweening matrices

[Iamattamai 6 Likes (Newbie)]

I see the documentation for rotation direction, but it doesn't seem to apply to matrix transforms or at least I can't find the syntax I should use.

I'm using Inkscape to position some SVG elements  and tweening the matrices it outputs.

Seems GSAP wants to default to counter clockwise for any rotations which is sometimes the 'long way around' - I would like to either control direction or change to shortest distance globally.

[PointC 8,599 Likes (Superhero)]

I think you're looking for the DirectionalRotationPlugin.

 

https://greensock.com/docs/Plugins/DirectionalRotationPlugin

 

Happy tweening.

[Iamattamai 6 Likes (Newbie)]

I saw that documentation. I'm struggling with the syntax for matrices.

I tried this:

.to("#mything", gdur, {transform:"matrix(-.45127661, -.10921767, -.09499633, .41718125, -40.591503, 187.74884)_cw"},0)

It didn't like that at all.

When the documentation says "Included in TweenMax: Yes" does that mean it is included in the TweenMax code or it is included as a plugin with the purchase? Well no matter, I found the plugin and installed it - made no difference. It doesn't work as a suffix for a matrix it appears.

 

also tried: 

.to("#mything", gdur, {directionalRotation:{transform:"matrix(-.45127661, -.10921767, -.09499633, .41718125, -40.591503, 187.74884)"+"_short"}},0) and...

.to("#mything", gdur, {directionalRotation:{transform:"matrix(-.45127661, -.10921767, -.09499633, .41718125, -40.591503, 187.74884)_short"}},0)

 

I'm hoping there is a way to do this...

Thanks in advance.

[GreenSock 8,117 Likes (Superhero)]

Wow, that's pretty unusual for someone to be feeding in matrix values like that. The problem is that internally those matrices must be decomposed into the various parts like x, y, scaleX, scaleY, rotation, skewX, etc. so that they can be interpolated properly. If you've ever tried tweening the values inside of a matrix, you'll see how weird it looks whenever rotation is involved. 

 

For directional rotation to be used, obviously you need to actually define a rotation value (not a matrix). So you need a way of busting apart that matrix. If you don't have your own method for doing that (it can get pretty complex), you could craft a reusable function that piggy-backs on GSAP's capabilities like this:

 

//take a matrix, decompose it into each piece (x, y, scaleX, rotation, etc.) and make sure that rotation has the "_short" suffix to make it go in the shortest direction. The third parameter is optional - it's where you'd define all the other vars values like ease and whatever else you'd normally feed into your tween.
function transformVars(element, matrix, vars) {
	vars = vars || {};
	var tween = TweenLite.to(element, 1, {transform:matrix}).progress(1),
		t = tween.target._gsTransform,
		props = {x:0, y:0, scaleX:1, scaleY:1, rotation:0, skewX:0},
		p;
	for (p in props) {
		vars[p] = t[p];
	}
	vars.rotation += "_short";
	tween.progress(0).kill();
	return vars;
}
//usage:
TweenMax.to(element, 2, transformVars(element, "matrix(-.45127661, -.10921767, -.09499633, .41718125, -40.591503, 187.74884)", {ease:Power2.easeInOut}));

 

Does that help? 

[Iamattamai 6 Likes (Newbie)]

That's some amazing magic, but I can't tell if it will work.

Its throwing an error at the vars[p] = t[p] line thusly: Uncaught TypeError: Cannot read property 'x' of undefined

The element I substituted for both 'element' variables in your usage example is valid - same one I was using before with incorrect rotation.

 

I'm studying what you did to troubleshoot with some difficulty, seems you are executing the matrix transform, grabbing the values, adding the rotation direction, killing the transform, and returning the values. I'm not understanding it well enough to pinpoint the problem though.

The logic looks sound though, and I really appreciate your assistance.

 

And yes, I do specialize in the unusual. I'm animating a 20-piece SVG figure using Inkscape to position all the body parts into various poses and then tweening between those. Inkscape SVG outputs matrices and the matrix tweening works fine until there is clockwise rotation defined between matrix pairs. GSAP evidently defaults to counter-clockwise. It looks like your fix would solve that if I can get past the error.

[GreenSock 8,117 Likes (Superhero)]

8 hours ago, Iamattamai said:

Its throwing an error at the vars[p] = t[p] line thusly: Uncaught TypeError: Cannot read property 'x' of undefined

 

Hm, is there any chance you could provide a reduced test case in codepen or something? I'd love to see what's going on in-context. 

 

8 hours ago, Iamattamai said:

GSAP evidently defaults to counter-clockwise.

 

No, it doesn't default to any particular direction at all. It just tweens the values normally. So, for example, if you're tweening from rotation:20 to rotation:50, it'd go one direction, but if you're going from rotation:20 to rotation:-10, it'd go the other direction. 

 

Again, I'd love to help once I can see a demo. It's just really tough to troubleshoot blind

[Iamattamai 6 Likes (Newbie)]

Hey Jack.

Thank you SO much for your help.

Between your progress idea coupled with the _gsTransform nugget I created an external matrix converter for my purposes.

Since I have to handle and modify the matrices between applications anyway it works well for my needs and there is no conversion delay.

Seems the problem with my attempted implementation of your function above was with the reference to var tween, in case anybody else comes down this path.

It was a brilliant piece of code.

I didn't troubleshoot any further to root out my issue with it.

And Saturday support is WAY unexpected - you guys rock.

[GreenSock 8,117 Likes (Superhero)]

16 hours ago, Iamattamai said:

Between your progress idea coupled with the _gsTransform nugget I created an external matrix converter for my purposes.

 

Excellent. Glad to hear you figured out a solution. 

 

16 hours ago, Iamattamai said:

Seems the problem with my attempted implementation of your function above was with the reference to var tween, in case anybody else comes down this path.

 

I'd still be happy to take a peek if you've got a reduced test case. Maybe I made a mistake somewhere in my code and I just don't see it right now. 

 

16 hours ago, Iamattamai said:

And Saturday support is WAY unexpected - you guys rock.

 

?

 

Thanks for being a Club GreenSock member!