Search Community

# Kind of an opinion question

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

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()
.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

##### Share on other sites

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()
.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?

• 4
##### Share on other sites

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

• 5
##### Share on other sites

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()
.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.

• 5
##### Share on other sites

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

• 2

## 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!