Kind of an opinion question

[sauldraws]

Howdy;

I've been pouring through the forums and a few of the examples and I have a question, from the point of view of ease of learning and efficient code (and yes I know those two things often fight each other)

given code like this 

 

spinningWheels = new TimelineMax().add(spin());

function spin() {
	var tl = new TimelineMax()
		.add("begin-spin")
		.to(gear, 4, {transformOrigin:"50% 50%", rotation:360, repeat:-1, ease: Linear.easeNone}, "begin-spin")
		.to(cog, 2, {transformOrigin:"50% 50%", rotation:360, repeat:-1, ease: Linear.easeNone}, "begin-spin + .125")
		.to(eight_cog, 3, {transformOrigin:"50% 50%", rotation:360, repeat:-1, ease: Linear.easeNone}, "begin-spin + .125")
		.to(wheels, 2, {transformOrigin:"50% 50%", rotation:360, repeat:-1, ease: Linear.easeNone}, "begin-spin")
	return tl;
}

initially when look at the redundant vars object in each to line, I think, 'I should break that out', I haven't actually tried it, now that I sit typing this - I'm not sure it's valid thinking, thoughts? 

I realize it's kind of a benign topic, but I'm procrastinating this morning

 

[GreenSock]

Good question. Yeah, I'd feel the same way as you - it'd bug me to have so many repeated values. In this case, you could just create a variable and reuse it:

spinningWheels = new TimelineMax().add(spin());
function spin() {
    var vars = {transformOrigin:"50% 50%", rotation:360, repeat:-1, ease: Linear.easeNone},
        tl = new TimelineMax()
        .add("begin-spin")
        .to(gear, 4, vars, "begin-spin")
        .to(cog, 2, vars, "begin-spin + .125")
        .to(eight_cog, 3, vars, "begin-spin + .125")
        .to(wheels, 2, vars, "begin-spin")
    return tl;
}

 

Also, I'm not sure if you were trying to use a relative position with the whole " + .125", but the right way would be "begin-spin+=0.125". The way you're doing it now is just gonna be a new label altogether. 

 

Does that help at all? 

[Carl]

didn't see GreenSock was answering, but here is an additional way of using a parameterized function

 

See the Pen NawYLP?editors=0010 by GreenSock (@GreenSock) on CodePen

 

[PointC]

I hate to follow @GreenSock and @Carl in a thread , but I'll throw my two cents worth out there for you.

 

I find myself in some timelines with repeating vars and write it the way Jack did in his answer. Another option is to set() the transformOrigin on your elements in an array outside of the timeline (or add a class and set that). You can also change the default ease to save some typing. Something like this:

 

TweenLite.defaultEase = Linear.easeNone;
TweenMax.set([gear, cog, eight_cog, wheels], {transformOrigin:"50% 50%"});
var spinningWheels = new TimelineMax().add(spin());
function spin() {
    var tl = new TimelineMax()
        .add("begin-spin")
        .to(gear, 4, {rotation:360, repeat:-1}, "begin-spin")
        .to(cog, 2, {rotation:360, repeat:-1}, "begin-spin+=0.125")
        .to(eight_cog, 3, {rotation:360, repeat:-1}, "begin-spin+=0.125")
        .to(wheels, 2, {rotation:360, repeat:-1}, "begin-spin");
    return tl;
}

 

I like Jack and Carl's answers better on this, but this is another option for you. Happy tweening.

[sauldraws]

all great answers actually..
I learned something from all three of you