stupidsimple

tween without taking up 'space' in timeline

Recommended Posts

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.

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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.

 

  • Like 4

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

 

 

  • Like 2

Share this post


Link to post
Share on other sites

Yes that makes sense, thanks for your explanation.

Share this post


Link to post
Share on other sites

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)

 

  • Like 4

Share this post


Link to post
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.