tween without taking up 'space' in timeline

[stupidsimple 0 Likes (Newbie)]

I have the following timeline (simplified for this topic)

 

var tl = new TimelineMax({});
tl.to(".orange", 1.0, {y:200})
.to(".photo", 12.0, {scale:1.2})
.to(".button", 1.0, {opacity:1.0})

 

What I want is that the '.photo' tween doesn't take up space in the timeline.

I know I can use the time parameter for the button like this:

.to(".button", 1.0, {opacity:1.0},"-=12.0")

 

Is there a nicer way to solve this?

What I want is to start a tween in the timeline at a specific moment, but the tween that follows should start right after.

 

 

[mikel 1,249 Likes (Superhero)]

Hi @stupidsimple,

 

Take a look at this: position-parameter

 

And try

 

var tl = new TimelineMax({});
tl.to(".orange", 1.0, {y:200})
.to(".photo", 12.0, {scale:1.2})
.to(".button", 1.0, {opacity:1.0},0)  //insert tween at second 0 into timeline

 

Happy tweening ...

Mikel

[stupidsimple 0 Likes (Newbie)]

Thanks for your quick reply Mikel, that is a possible solution.

 

But what if I want to have other tweens after the button tween?

I don't want to position all Tweens on the timeline with the position parameter.

 

[Dipscom 2,342 Likes (Superhero)]

Elaborating a bit more on Mikel's suggestion:

 

You can pair what he's suggesting with a label:

 

var tl = new TimelineMax({});
tl.to(".orange", 1.0, {y:200})
.to(".photo", 12.0, {scale:1.2}, 'labelName')
//... more tween stuff
.to(".button", 1.0, {opacity:1.0}, 'labelName')  //insert tween at label 'labelName' of the timeline
.to(".other-button", 1.0, {opacity:1.0}, 'labelName') // that way you can have several tweens off the same spot

 

Not your 'not-taking-space' tweens will all have to be placed at the end of the timeline, else you won't achieve your desired effect.

 

Another alternative is to have a call to a function that triggers whatever tween you want

 

var tl = new TimelineMax({});
tl.to(".orange", 1.0, {y:200})
.to(".photo", 12.0, {scale:1.2})
.call(fireTween, ['.a-button'])
.to(".button", 1.0, {opacity:1.0},0)


function fireTween(el) {
  TweenMax.to(el, 1, {opacity:0);
}

 

But bear in mind those tweens will not be part of the timeline and thus, will not be controlled by it. No pausing, reversing, or anything.

 

[stupidsimple 0 Likes (Newbie)]

Thanks Dipscon,

I think I would go for the 'call' function, I really hoped there was some secret 'takeUpSpaceInTimeline:false' parameter that I could add to a tween.

or am I the only person who has problems with this?

[Dipscom 2,342 Likes (Superhero)]

Firstly:

 

Welcome to the forums.

 

I forgot the greeting in the previous post. 😛

 

I wouldn't say what you have is a problem. It all depends what you need to achieve. If your 'not-taking-space' is not related to the timeline, you're far better off calling the function rather than hacking around with Mikel's idea.

 

Bottom line is: it makes no sense to have a tween that does not takes space in a timeline simply because the whole point of organizing tweens in a timeline is to have them controlled and accounted for. If your tween is not part of the timeline, well, call a tween outside the timeline.

 

 

[stupidsimple 0 Likes (Newbie)]

Yes that makes sense, thanks for your explanation.

[Carl 8,865 Likes (Superhero)]

in addition to the other great advice you could:

 

1 - Build your entire timeline without the photo animation and then add it LAST at the time you want.

var tl = new TimelineMax({});
tl.to(".orange", 1.0, {y:200})
   .to(".button", 1.0, {opacity:1.0})

  .to(".apple", 1.0, {opacity:1.0})

  .to(".orange", 1.0, {opacity:1.0})

// when all tweens are added then add the photo

  .to(".photo", 12.0, {scale:1.2}, 1)

 

 

2 - create a master timeline with some tweens and the photo tween and then nest another timeline with all the other stuff in it anywhere you want in the master timeline.

 

var otherTimeline = new TimelineLite();

otherTimeline.to(".otherThing1", 1, {x:100})

otherTimeline.to(".otherThing2", 1, {y:100})

otherTimeline.to(".otherThing3", 1, {x:100})

otherTimeline.to(".otherThing4", 1, {y:100})



var tl = new TimelineMax({});
tl.to(".orange", 1.0, {y:200})
   .to(".photo", 12.0, {scale:1.2})
   .add(otherTimeline, 1)