Jump to content
Search Community

Rotation direction tweening matrices

Iamattamai test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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? 

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :(

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...